js中常用的Tab切换效果(推荐)
如下所示：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>tab</title>
<style>
*{margin:0;padding:0;list-style:none;}
.box{
width:1000px;
overflow:hidden;
margin:100pxauto0px;
}
#title{
line-height:40px;
background-color:rgb(247,247,247);
font-size:16px;
font-weight:bold;
color:rgb(102,102,102);
overflow:hidden;
}
#titlespan{
float:left;
width:166px;
text-align:center;
}
#titlespan:hover{
/*color:black;*/
cursor:pointer;
}
#content{
margin-top:20px;
}
#contentli{
width:1050px;
overflow:hidden;
display:none;
background-color:rgb(247,247,247);
}
#contentlidiv{
width:156px;
margin-right:14px;
float:left;
text-align:center;
}
#contentlidiva{
font-size:14px;
color:black;
line-height:14px;
/*float:left;*/
display:inline-block;
margin-top:10px;
}
#contentlia:hover{
color:#B70606;
}
#contentlidivspan{
font-size:16px;
line-height:16px;
/*float:left;*/
display:block;
color:rgb(102,102,102);
margin-top:10px;
}
#contentimg{
float:left;
width:155px;
height:250px;
}
#title.select{
background-color:rgb(10,167,112);
color:white;
}
#content.show{
display:block;
}
</style>
</head>
<body>
<divclass="box">
<pid="title">
<spanclass="select">帅哥</span>
<span>美女</span>
<span>宠物</span>
<span>影视</span>
<span>英雄联盟</span>
<span>音乐</span>
</p>
<ulid="content">
<liclass="show">
<div><imgsrc="images/shuaige1.jpg"alt="帅哥1"><ahref="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div>
<div><imgsrc="images/shuaige2.jpg"alt="帅哥2"><ahref="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div>
<div><imgsrc="images/shuaige3.jpg"alt="帅哥3"><ahref="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div>
<div><imgsrc="images/shuaige4.jpg"alt="帅哥4"><ahref="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div>
<div><imgsrc="images/shuaige5.jpg"alt="帅哥5"><ahref="#">卷福</a><span>低调奢华有内涵</span></div>
<div><imgsrc="images/shuaige6.jpg"alt="帅哥6"><ahref="#">卷福</a><span>低调奢华有内涵</span></div>
</li>
<li>
<div><imgsrc="images/meinv1.jpg"alt="美女1"><ahref="#">美女</a><span>外猛内柔女汉子</span></div>
<div><imgsrc="images/meinv2.jpg"alt="美女2"><ahref="#">美女</a><span>外猛内柔女汉子</span></div>
<div><imgsrc="images/meinv3.jpg"alt="美女3"><ahref="#">美女</a><span>卖萌嘟嘴剪刀手</span></div>
<div><imgsrc="images/meinv4.jpg"alt="美女4"><ahref="#">美女</a><span>卖萌嘟嘴剪刀手</span></div>
<div><imgsrc="images/meinv5.jpg"alt="美女5"><ahref="#">美女</a><span>时尚亮丽小清新</span></div>
<div><imgsrc="images/meinv6.jpg"alt="美女6"><ahref="#">美女</a><span>时尚亮丽小清新</span></div>
</li>
<li>
<div><imgsrc="images/chongwu1.jpg"alt="宠物1"><ahref="#">宠物</a><span>每只666块</span></div>
<div><imgsrc="images/chongwu2.jpeg"alt="宠物2"><ahref="#">宠物</a><span>每只666块</span></div>
<div><imgsrc="images/chongwu3.jpg"alt="宠物3"><ahref="#">宠物</a><span>每只666块</span></div>
<div><imgsrc="images/chongwu4.jpg"alt="宠物4"><ahref="#">宠物</a><span>每只666块</span></div>
<div><imgsrc="images/chongwu5.jpg"alt="宠物5"><ahref="#">宠物</a><span>每只666块</span></div>
<div><imgsrc="images/chongwu6.jpg"alt="宠物6"><ahref="#">宠物</a><span>每只666块</span></div>
</li>
<li>
<div><imgsrc="images/yingshi1.jpg"alt="影视1"><ahref="#">哈利波特系列</a><span>经典中的经典</span></div>
<div><imgsrc="images/yingshi2.jpg"alt="影视2"><ahref="#">三傻大闹宝莱坞</a><span>看到泪崩</span></div>
<div><imgsrc="images/yingshi3.jpg"alt="影视3"><ahref="#">变形金刚系列</a><span>过瘾过瘾过瘾</span></div>
<div><imgsrc="images/yingshi4.jpg"alt="影视4"><ahref="#">千与千寻</a><span>梦中的小萝莉那么清新</span></div>
<div><imgsrc="images/yingshi5.jpeg"alt="影视5"><ahref="#">龙猫</a><span>我的龙猫啊啊啊</span></div>
<div><imgsrc="images/yingshi6.jpg"alt="影视6"><ahref="#">阿甘正传</a><span>阿甘还是那个阿甘</span></div>
</li>
<li>
<div><imgsrc="images/lol1.jpg"alt="lol1"><ahref="#">寒冰射手</a><span>蛮王他媳妇</span></div>
<div><imgsrc="images/lol2.jpg"alt="lol2"><ahref="#">黑暗之女</a><span>小萝莉一枚</span></div>
<div><imgsrc="images/lol3.jpg"alt="lol3"><ahref="#">探险家</a><span>游戏中我最帅</span></div>
<div><imgsrc="images/lol4.jpg"alt="lol4"><ahref="#">人马</a><span>上单大野全能</span></div>
<div><imgsrc="images/lol5.jpg"alt="lol5"><ahref="#">提莫提百万</a><span>每天死亡百万次。。</span></div>
<div><imgsrc="images/lol6.jpg"alt="lol6"><ahref="#">狼人</a><span>别给我放大</span></div>
</li>
<li>
待开发。。。
</li>
</ul>
</div>
<script>
vartitle=document.getElementById('title');
varcontent=document.getElementById('content');
varspans=title.getElementsByTagName('span');
varlis=content.getElementsByTagName('li');
for(vari=0;i<spans.length;i++){
spans[i].index=i;
spans[i].onclick=function(){
for(varj=0;j<spans.length;j++){
spans[j].className='';
lis[j].className='';
}
this.className='select';
lis[this.index].className='show';
}
}
</script>
</body>
</html>
这段代码的关键处在最后的两个for遍历和this指针，第一个for遍历是为每一个span按钮添加点击事件，而第二个for遍历是确定当前点击的是哪个按钮，相应的内容部分就很好控制出现和隐藏了。
以上这篇js中常用的Tab切换效果(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。