js中常用的Tab切換效果(推薦)
更新時間：2016年08月30日 09:20:21 投稿：jingxian
下面小編就為大家?guī)硪黄猨s中常用的Tab切換效果(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{margin:0; padding:0; list-style:none;}
.box{
width: 1000px;
overflow: hidden;
margin:100px auto 0px;
}
#title{
line-height: 40px;
background-color: rgb(247,247,247);
font-size: 16px;
font-weight: bold;
color: rgb(102,102,102);
overflow: hidden;
}
#title span{
float: left;
width: 166px;
text-align: center;
}
#title span:hover{
/*color: black;*/
cursor: pointer;
}
#content{
margin-top: 20px;
}
#content li{
width: 1050px;
overflow: hidden;
display: none;
background-color: rgb(247,247,247);
}
#content li div{
width: 156px;
margin-right: 14px;
float: left;
text-align: center;
}
#content li div a{
font-size: 14px;
color: black;
line-height: 14px;
/* float: left;*/
display: inline-block;
margin-top: 10px;
}
#content li a:hover{
color: #B70606;
}
#content li div span{
font-size: 16px;
line-height: 16px;
/*float: left;*/
display: block;
color: rgb(102,102,102);
margin-top: 10px;
}
#content img{
float: left;
width: 155px;
height: 250px;
}
#title .select{
background-color: rgb(10,167,112);
color: white;
}
#content .show{
display: block;
}
</style>
</head>
<body>
<div class="box">
<p id="title">
<span class="select">帥哥</span>
<span>美女</span>
<span>寵物</span>
<span>影視</span>
<span>英雄聯(lián)盟</span>
<span>音樂</span>
</p>
<ul id="content">
<li class="show">
<div><img src="images/shuaige1.jpg" alt="帥哥1"><a href="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div>
<div><img src="images/shuaige2.jpg" alt="帥哥2"><a href="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div>
<div><img src="images/shuaige3.jpg" alt="帥哥3"><a href="#">湯姆·克魯斯</a><span>高端大氣上檔次</span></div>
<div><img src="images/shuaige4.jpg" alt="帥哥4"><a href="#">湯姆·克魯斯</a><span>高端大氣上檔次</span></div>
<div><img src="images/shuaige5.jpg" alt="帥哥5"><a href="#">卷福</a><span>低調(diào)奢華有內(nèi)涵</span></div>
<div><img src="images/shuaige6.jpg" alt="帥哥6"><a href="#">卷福</a><span>低調(diào)奢華有內(nèi)涵</span></div>
</li>
<li>
<div><img src="images/meinv1.jpg" alt="美女1"><a href="#">美女</a><span>外猛內(nèi)柔女漢子</span></div>
<div><img src="images/meinv2.jpg" alt="美女2"><a href="#">美女</a><span>外猛內(nèi)柔女漢子</span></div>
<div><img src="images/meinv3.jpg" alt="美女3"><a href="#">美女</a><span>賣萌嘟嘴剪刀手</span></div>
<div><img src="images/meinv4.jpg" alt="美女4"><a href="#">美女</a><span>賣萌嘟嘴剪刀手</span></div>
<div><img src="images/meinv5.jpg" alt="美女5"><a href="#">美女</a><span>時尚亮麗小清新</span></div>
<div><img src="images/meinv6.jpg" alt="美女6"><a href="#">美女</a><span>時尚亮麗小清新</span></div>
</li>
<li>
<div><img src="images/chongwu1.jpg" alt="寵物1"><a href="#">寵物</a><span>每只666塊</span></div>
<div><img src="images/chongwu2.jpeg" alt="寵物2"><a href="#">寵物</a><span>每只666塊</span></div>
<div><img src="images/chongwu3.jpg" alt="寵物3"><a href="#">寵物</a><span>每只666塊</span></div>
<div><img src="images/chongwu4.jpg" alt="寵物4"><a href="#">寵物</a><span>每只666塊</span></div>
<div><img src="images/chongwu5.jpg" alt="寵物5"><a href="#">寵物</a><span>每只666塊</span></div>
<div><img src="images/chongwu6.jpg" alt="寵物6"><a href="#">寵物</a><span>每只666塊</span></div>
</li>
<li>
<div><img src="images/yingshi1.jpg" alt="影視1"><a href="#">哈利波特系列</a><span>經(jīng)典中的經(jīng)典</span></div>
<div><img src="images/yingshi2.jpg" alt="影視2"><a href="#">三傻大鬧寶萊塢</a><span>看到淚崩</span></div>
<div><img src="images/yingshi3.jpg" alt="影視3"><a href="#">變形金剛系列</a><span>過癮過癮過癮</span></div>
<div><img src="images/yingshi4.jpg" alt="影視4"><a href="#">千與千尋</a><span>夢中的小蘿莉那么清新</span></div>
<div><img src="images/yingshi5.jpeg" alt="影視5"><a href="#">龍貓</a><span>我的龍貓啊啊啊</span></div>
<div><img src="images/yingshi6.jpg" alt="影視6"><a href="#">阿甘正傳</a><span>阿甘還是那個阿甘</span></div>
</li>
<li>
<div><img src="images/lol1.jpg" alt="lol1"><a href="#">寒冰射手</a><span>蠻王他媳婦</span></div>
<div><img src="images/lol2.jpg" alt="lol2"><a href="#">黑暗之女</a><span>小蘿莉一枚</span></div>
<div><img src="images/lol3.jpg" alt="lol3"><a href="#">探險家</a><span>游戲中我最帥</span></div>
<div><img src="images/lol4.jpg" alt="lol4"><a href="#">人馬</a><span>上單大野全能</span></div>
<div><img src="images/lol5.jpg" alt="lol5"><a href="#">提莫提百萬</a><span>每天死亡百萬次。。</span></div>
<div><img src="images/lol6.jpg" alt="lol6"><a href="#">狼人</a><span>別給我放大</span></div>
</li>
<li>
待開發(fā)。。。
</li>
</ul>
</div>
<script>
var title=document.getElementById('title');
var content=document.getElementById('content');
var spans=title.getElementsByTagName('span');
var lis=content.getElementsByTagName('li');
for (var i = 0; i < spans.length; i++) {
spans[i].index=i;
spans[i].onclick=function(){
for (var j = 0; j < spans.length; j++) {
spans[j].className='';
lis[j].className='';
}
this.className='select';
lis[this.index].className='show';
}
}
</script>
</body>
</html>
這段代碼的關(guān)鍵處在最后的兩個for遍歷和this指針，第一個for遍歷是為每一個span按鈕添加點擊事件，而第二個for遍歷是確定當(dāng)前點擊的是哪個按鈕，相應(yīng)的內(nèi)容部分就很好控制出現(xiàn)和隱藏了。
以上這篇js中常用的Tab切換效果(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript操作XML/HTML比較常用的對象屬性集錦
本文給大家介紹javascript操作xml/html比較常用的對象屬性，涉及到j(luò)s對象屬性相關(guān)知識，對JavaScript操作XML/HTML比較常用的對象屬性感興趣的朋友可以參考下本文2015-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript圖片懶加載的優(yōu)化方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
寫了一個layout，拖動條連貫，內(nèi)容區(qū)可為iframe
寫了一個layout，拖動條連貫，內(nèi)容區(qū)可為iframe...2007-08-08
這篇文章主要介紹了chrome監(jiān)聽cookie變化與賦值問題,cookie監(jiān)聽與賦值操作需要manifest文件里聲明權(quán)限問題，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
用javascript實現(xiàn)分割提取頁面所需內(nèi)容
用javascript實現(xiàn)分割提取頁面所需內(nèi)容...2007-05-05
Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執(zhí)行解壓縮動作的文章，一直沒有去用心看，前日，趁老大不在，爽了一把，把它改成了用JavaScript操作的了。2008-04-04
搞開發(fā)已經(jīng)很久了，一直搞不懂a(chǎn)++和++a到底有所什么不同，后來通過查閱相關(guān)資料總結(jié)出一點規(guī)律，下面小編通過本文給大家介紹2017-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡易tab欄切換案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
下面小編就為大家?guī)硪黄鷍s獲取元素樣式的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js 判斷一個元素是否存在此功能在項目中很實用，本人搜集整理了一些常用技巧，需要了解的朋友可以參考下2012-12-12