您的位置：首页 > 其它

tab选项卡切换效果

2015-11-27 10:08 344 查看

tab选项卡切换效果在大部分的网站上都能看到，这是一个很有用的效果。下面先简单地说下这个效果的实现原理和思路。

tab选项卡说白了就是n个标签对应n个模块的内容，点到哪个标签，与之相对应的内容就会被显示，其他的内容被隐藏。标签部分一般用一个无序列表，显示的内容部分则用<div class="mode">...</div>这样的包裹层包裹起来。

实现步骤：

1.获取标签<li>..</li>数组

2.获取显示的内容的<div class="mode'>..</div>数组。

3.将他们一一对应，设置显示的样式。

说起来还是比较麻烦的，直接上源码，这个源码很简单，没有过多的CSS样式，纯粹的是为了演示tab选项卡的效果，不怎么美观。但代码比较简单，一看就懂。下面的源码是可以直接运行的

html部分：

<body>
<!-- 最外层的div是一个包裹整个tab选项卡的包裹层-->
<div id="wrap">
<div id="title">
<!-- 标题部分通常用一个无序列表来表示-->
<ul>
<li><a href="#">标题一</a></li>
<li><a href="#">标题二</a></li>
<li><a href="#">标题三</a></li>
<li><a href="#">标题四</a></li>
<li><a href="#">标题五</a></li>
</ul>
</div>
<div id="content">
<!-- 下面的是要显示的内容。一个div对应标题里面的一个标签-->
<div class="mod">
<p>我是标签<b>一</b>，我是标签<b>一</b>，我是标签<b>一</b>，我是标签<b>一</b>，我是标签<b>一</b>，</p>
</div>

<div class="mod" style="display: none;">
<p>我是标签<b>二</b>，我是标签<b>二</b>，我是标签<b>二</b>，我是标签<b>二</b>，我是标签<b>二</b>，</p>
</div>

<div class="mod" style="display: none;">
<p>我是标签<b>三</b>，我是标签<b>三</b>，我是标签<b>三</b>，我是标签<b>三</b>，我是标签<b>三</b>，</p>
</div>

<div class="mod" style="display: none;">
<p>我是标签<b>四</b>，我是标签<b>四</b>，我是标签<b>四</b>，我是标签<b>四</b>，我是标签<b>四</b>，</p>
</div>

<div class="mod" style="display: none;">
<p>我是标签<b>五</b>，我是标签<b>五</b>，我是标签<b>五</b>，我是标签<b>五</b>，我是标签<b>五</b>，</p>
</div>
</div>
</div>

</body>

CSS部分：

<style>
*{padding: 0;margin: 0;}
#wrap{
width: 500px;
height: 500px;
margin: 50px auto;
border:1px solid black;
}
#title{
height: 30px;
background-color: darkgray;
}
#title ul{
width: 100%;
list-style: none;
}
#title ul li{
display: inline-block;
width: 90px;
float: left;
padding: 5px;
text-align: center;

}
#title ul li a{
color: white;
text-decoration: none;
}
#title ul li:hover{
background-color: black;
color: white;
}
</style>

JS部分：

<script>
window.onload=function(){
//获取标题列表
var oparent=document.getElementById("title");
var lis=oparent.getElementsByTagName("li");
//获取展示内容的列表
var mods=document.getElementById("content");
var divs=mods.getElementsByClassName("mod");

//遍历lis
for(var i=0;i<lis.length;i++){
lis[i].id=i;
//为每个元素添加滑动事件
lis[i].onmouseover=function(){
//先清除其他的样式
for(var j=0;j<lis.length;j++){
divs[j].style.display="none";
}
//被点击的标签所对应的内容显示
divs[this.id].style.display="block";
}
}

}
</script>

这样，这个tab选项卡的效果就实现了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航