Tab选项卡切换类型
- 点击切换
- 滑动切换
实现选项卡的切换,可以用JS来实现对页面CSS隐藏和显示形式的控制,从而达到切换的效果。下面介绍点击切换,滑动切换原理一样,只需把JS中onclick改成onmouseover
页面布局:
布局分成选项卡标题和内容两部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab选项卡</title>
</head>
<body>
<!--页面布局-->
<div id="tab">
<ul> //标题
<li class="on">我的关注</li>
<li class="off">推荐</li>
<li class="off">导航</li>
</ul>
<div id="page1" class="show"> //内容
<a href="#">我的导航</a><br/>
<a href="#">自定义</a><br/>
</div>
<div id="page2" class="hide">
<a href="#">推荐一</a><br/>
<a href="#">推荐二</a><br/>
<a href="#">推荐三</a><br/>
</div>
<div id="page3" class="hide">
<a href="#">天猫商城</a><br/>
<a href="#">苏宁易购</a><br/>
<a href="#">京东商城</a><br/>
</div>
</div>
</body>
</html>
CSS表现样式:
*{
margin:0;
padding:0;
font:normal 12px "微软雅黑";
color:#000000;
}
ul{list-style-type: none;}
a{text-decoration: none;}
#tab{
width: 800px;
height:300px;
margin: 20px auto;
border: 3px solid #F9F7F7;
}
#tab ul{
border-bottom: 2px solid #F9F7F7;
height: 40px;
}
#tab ul li{
display: inline-block;
float: left;
width: 70px;
line-height: 40px;
text-align: center;
}
#tab ul li:hover{
cursor: pointer;
color: white;
background-color: #DED8D8;
}
#tab ul li.on{
display: block;
height: 40px;
border-bottom :3px solid #F9F7F7;
background: #9a9da2;
}
#tab div{
line-height: 24px;
padding: 1px;
}
#tab div li{
height: 30px;
line-height: 30px;
text-indent: 8px;
}
.show{
display: block;
}
.hide{
display:none;
}
JS实现点击切换控制:
当鼠标点击某一选项时,相应的内容div显示,其余选项内容div隐藏,运用一个循环就可以实现选项卡的切换了。
window.onload=function(){
var myTab=document.getElementById("tab");
var myUl=myTab.getElementsByTagName("ul")[0];
var myLi=myUl.getElementsByTagName("li");
var myDiv=myTab.getElementsByTagName("div");
for(var i=0;i<myLi.length;i++){
myLi[i].index=i;
myLi[i].onclick=function(){
for(var j=0;j<myLi.length;j++){
myLi[j].className="off";
myDiv[j].className="hide";
}
this.className="on";
myDiv[this.index].className="show";
}
}
}
如果要实现自动切换和延迟切换可以在JS中加上计时器setInterval或setTimeout,本节内容不再论述。