很棒的js Tab選項卡切換效果
本文實例為大家分享了js Tab選項卡切換效果,供大家參考,具體內(nèi)容如下
<!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)和隱藏了;
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript中打印當(dāng)前的時間實現(xiàn)思路及代碼
打印當(dāng)前的時間的方法有很多,在本文為大家詳細介紹下使用javascript是如何做到的,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-12-12JavaScript中三種for循環(huán)語句的使用總結(jié)(for、for...in、for...of)
這篇文章主要給大家介紹了關(guān)于JavaScript中三種for循環(huán)語句的使用的相關(guān)資料,For循環(huán)用在需要重復(fù)執(zhí)行的某些代碼,本文介紹的三種for循環(huán)分別包括for、for...in、for...of,需要的朋友可以參考下2021-06-06微信小程序返回上一頁刷新組件數(shù)據(jù)的示例代碼
這篇文章主要介紹了微信小程序返回上一頁刷新組件數(shù)據(jù)的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-03-03TypeScript?背后的結(jié)構(gòu)化類型系統(tǒng)原理詳解
這篇文章主要為大家介紹了TypeScript?背后的結(jié)構(gòu)化類型系統(tǒng)原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11微信小程序圖片輪播組件gallery slider使用方法詳解
這篇文章主要為大家詳細介紹了微信小程序圖片輪播組件gallery slider的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-01-01