javascript,tab选项卡的实现和应用案例

迷南。 2022-01-22 23:25 234阅读 0赞

## 选项卡案例 ##

<style type="text/css">
    			.btnBox,.contentBox{
    				display: none;
    			}
    			.boxActive{
    				display: block;
    			}
    			.btnBox{
    				border: 1px solid red;
    				width: 300px;
    				height: 200px;
    			}
    			.contentBox{
    				border: 1px solid green;
    				height: 100px;
    			}
    		</style>

<body>
    		<button class="btnParent">全部</button>
    		<button class="btnParent">vip会员免费</button>
    		<button class="btnParent">vip折扣点播</button>
    		<div class="btnBox boxActive">
    			<button>最近更新</button><button>最受欢迎</button>
    			<div class="contentBox boxActive">对应全部的最近更新</div>
    			<div class="contentBox">对应全部的最受欢迎</div>
    		</div>
    		<div class="btnBox">
    			<button>最近更新</button><button>最受欢迎</button>
    			<div class="contentBox boxActive">对应vip会员免费的最近更新</div>
    			<div class="contentBox">对应vip会员免费的最受欢迎</div>
    		</div>
    		<div class="btnBox">
    			<button>最近更新</button><button>最受欢迎</button>
    			<div class="contentBox boxActive">对应vip折扣点播的最近更新</div>
    			<div class="contentBox">对应vip折扣点播的最受欢迎</div>
    		</div>
    	</body>

<script type="text/javascript">
    		var btnParent = document.getElementsByClassName('btnParent');
    		var btnBox = document.getElementsByClassName('btnBox');
    		
    		for(var i=0;i<btnParent.length;i++){
    			btnParent[i].index = i;
    			btnParent[i].onclick = function () {
    				for(var j=0;j<btnBox.length;j++){
    					//这个className的设置 会直接覆盖原来所有的样式
    					//应该保留默认的那个样式
    					btnBox[j].className = 'btnBox';
    				}
    				btnBox[this.index].className = 'btnBox boxActive';
    			}
    		}
    		tabChild(0);
    		tabChild(1);
    		tabChild(2);
    		function tabChild (num) {
    			var btn = btnBox[num].getElementsByTagName('button');
    			var contentBox = btnBox[num].getElementsByClassName('contentBox');
    			for(var l=0;l<btn.length;l++){
    				btn[l].index = l;
    				btn[l].onclick = function () {
    					for(var h=0;h<contentBox.length;h++){
    						contentBox[h].className = 'contentBox';
    					}
    					contentBox[this.index].className = 'contentBox boxActive';
    				}
    			}
    		}

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220123/90760c4e71aa4b7186ec28903cb8914a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui选项卡的实现

目录前言模块加载名称： element一、element组件 1. element基础方法 2. 优化前端JSP页面 3. 引入头部hand.jsp页面 4.

秒速五厘米/ 2024年03月17日 19:24/ 0 赞/ 38 阅读

相关 js 小案例事件委托选项卡实现

京东选项卡部分 var spcialTab = document.querySelector('.spcial-tab'), ddHead = doc

ゝ一世哀愁。/ 2022年09月12日 15:58/ 0 赞/ 153 阅读

相关 var和let实现选项卡切换

第一种：var css: <style> { padding: 0; ma

清疚/ 2022年08月28日 07:44/ 0 赞/ 154 阅读

相关 tab选项卡的应用

<style> body\{font-size:13px\} ul,li\{margin:0;padding:0;list-style:none\} \menu li \

蔚落/ 2022年07月12日 03:28/ 0 赞/ 223 阅读

相关 jq实现的选项卡

效果图： ![这里写图片描述][SouthEast] 代码如下： <!DOCTYPE html> <html lang="en"> <head>

偏执的太偏执、/ 2022年05月31日 04:08/ 0 赞/ 186 阅读

相关 jQuery实现选项卡功能

废话不多说了，直接上代码就好了 DOM结构有点儿长，其实很明了的。。。 <table> <thead> <tr id="ta

ゝ一世哀愁。/ 2022年05月21日 11:24/ 0 赞/ 248 阅读

相关 javascript选项卡嵌套的实现

标题 <style> {margin: 0px;padding: 0px;list-style: none;text-decoration

╰半夏微凉°/ 2022年01月28日 00:55/ 0 赞/ 275 阅读

相关 javascript,tab选项卡的实现和应用案例

选项卡案例 <style type="text/css"> .btnBox,.contentBox{ display: none;

迷南。/ 2022年01月22日 23:25/ 0 赞/ 235 阅读

相关 JS实现选项卡切换

面是用JS简单地实现选项卡功能的实例。 > 注意点：（1）闭包后，要使用立即执行函数； > > （2）绑定事件注意参数； > > （3）思路：将当前div显示，其余隐藏，

悠悠/ 2021年12月03日 10:45/ 0 赞/ 423 阅读

相关网页Tab选项卡实现

转自:[慕课网][Link 1] 效果图如下： ![20151216175601456][] html代码部分: <!doctype html>

港控/mmm°/ 2021年06月10日 20:41/ 0 赞/ 542 阅读