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

最新推荐文章于 2023-08-22 19:17:43 发布

大可&不必

最新推荐文章于 2023-08-22 19:17:43 发布

阅读量323

点赞数

文章标签： javascript tab选项卡的实现和应用案例

本文链接：https://blog.csdn.net/style201904/article/details/90726265

版权

选项卡案例

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

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

大可&不必

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript,tab选项卡的实现和应用案例

选项卡案例<style type="text/css"> .btnBox,.contentBox{ display: none; } .boxActive{ display: block; } .btnBox{ border: 1px solid red; width: 300px; height: 200px;...
复制链接

扫一扫