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

选项卡案例

<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';
				}
			}
		}

效果图
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页