js tab选项卡

最新推荐文章于 2023-02-15 17:58:21 发布

原创最新推荐文章于 2023-02-15 17:58:21 发布 · 705 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js傻瓜教程 #tab选项卡

本文介绍了一种实现Tab选项卡的方法，通过简单的HTML、CSS和JavaScript代码实现了内容的切换显示。该方案易于复用，适用于个人中心等场景。

引言：tab选项卡用的地方比较多，例如个人中心的资料展示。写个最最最简洁。复用性超强的，所以不多写css样式。太辣眼睛的话请见谅。

效果如图

原理：点击切换li通过添加类名显示隐藏div.两次for循环。

第一步：写一个最大的div，设个宽高/边框/居中/方便观看

<style>

#tab-list{width: 300px; height: 100px; margin: 0 auto; border: 1px solid bisque;}

</style>

第二步：左边写一个列表/左浮动,设个active显示一下当前是哪一个li

</div>

<style>

#tab-list{width: 300px; height: 100px; margin: 0 auto; border: 1px solid bisque;}

#d1{width: 100px; height: 100px;float:left;}
#d1 ul li{background-color: #7396B8;}
#d1 ul li.active{
background-color: red;
}

</style>

第三步：右边写一个div 放显示的内容/右浮动一下/再添加两个显示隐藏的类

</ul>

</div>

</div>

<style>

#tab-list{width: 300px; height: 100px; margin: 0 auto; border: 1px solid bisque;}
#d1{width: 100px; height: 100px;float:left;}
#d1 ul li{background-color: #7396B8;}
#d1 ul li.active{
background-color: red;
}
#d2{width: 190px; height: 100px; float: right;border: 1px saddlebrown solid;}
.hide{display: none;}
.show{display: block;}

</style>

页面如下

第五步：把内容2,3 隐藏添加类名给他们就行了

第六步：js部分

var d2=document.getElementById('d2');

//获取显示内容的div

完整代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<style>
#tab-list{width: 300px; height: 100px; margin: 0 auto; border: 1px solid bisque;}
#d1{width: 100px; height: 100px;float:left;}
#d1 ul li{background-color: #7396B8;}
#d1 ul li.active{
background-color: red;
}
#d2{width: 190px; height: 100px; float: right;border: 1px saddlebrown solid;}
.hide{display: none;}
.show{display: block;}
</style>
<script type="text/javascript" src="css/jquery-3.2.1.min.js"></script>

</head>
<body>
<div id="tab-list">
<div id="d1">
<ul id="ul1">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

<div id="d2">
<div>1</div>
<div class="hide">2</div>
<div class="hide">3</div>
</div>
</div>
<script type="text/javascript">
var dli=document.getElementById('ul1');
// alert(dli);
var ali=dli.getElementsByTagName('li');
// alert(dlis);
var d2=document.getElementById('d2');
var adiv=d2.getElementsByTagName('div');

for(var i=0;i<ali.length;i++)
{
ali[i].index=i;
ali[i].onclick=function(){
for(var i=0;i<ali.length;i++){
ali[i].className="";
}
this.className="active";

for(var j=0;j<adiv.length;j++)
{
adiv[j].className="hide";
}
adiv[this.index].className="show";
}
}


</script>

</body>
</html>

有空再改成jq