原生JS實現tab切換--web前端開發
阿新 • • 發佈：2017-08-24
soft 楊冪 microsoft hidden isp 老婆 tex oct rip <!DOCTYPE html>
tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分：
1、案例源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切換</title>
<style>
*{margin: 0;padding: 0}
aside{width:260px;height: 315px;border: 1px solid #c3ccd6;overflow: hidden;margin-top: 50px;}
ul{list-style-type: none;margin: 5px 5px 0 5px;width: 250px;height:30px;}
ul li a{float: left;width: 50px;height: 30px;line-height:30px;text-align: center;display: block;
text-decoration: none;font-size: 14px;color:#666; border-bottom: 2px solid white;}
ul li a:hover{font-weight:bold;color:#227fc6;border-bottom: 2px solid #227fc6 ;}
aside hr{width: 250px;margin: 0 auto;background-color:#ecf3f9;opacity: 0.5;}
aside .bottom section{margin: 5px auto;width: 250px;height: 115px;}
aside .bottom section img{width: 250px;height: 115px;}
aside .bottom ul li a{width: 250px;border: none;}
aside .bottom ul li a:hover{font-size: 14px;font-weight: normal;text-decoration: underline;} aside ul li .first{font-weight:bold;color:#227fc6;border-bottom: 2px solid #227fc6 ;}
</style>
</head>
<body>
<aside>
<ul>
<li onmouseover="tab(‘tab1‘)"><a href="#">頭條</a></li>
<li onmouseover="tab(‘tab2‘)"><a href="#">軍事</a></li>
<li onmouseover="tab(‘tab3‘)"><a href="#">社會</a></li>
<li onmouseover="tab(‘tab4‘)"><a href="#">明星</a></li>
<li onmouseover="tab(‘tab5‘)"><a href="#">情感</a></li>
</ul>
<hr>
<div class="bottom" id="tab1">
<section>
<img src="images/2017-08-23_215120.png"/>
</section>
<ul>
<li class="first"><a href="#">直擊:臺風"天鴿"來襲人像紙片一樣飛</a></li>
<li><a href="#">章瑩穎家屬:葉落歸根找不到她不回國</a></li>
<li><a href="#">艷遇?協警執法遭過路女子摟脖強吻 </a></li>
<li><a href="#">10歲女童多次遭"叔叔"強奸 產下女嬰</a></li>
<li><a href="#">男子因心情不好 頭戴女士內褲行竊 </a></li>
</ul>
</div>
<div class="bottom" id="tab2">
<section>
<img src="images/2017-08-23_214539.png"/>
</section>
<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 class="bottom" id="tab3">
<section>
<img src="images/2017-08-23_214615.png"/>
</section>
<ul>
<li><a href="#">派出所長遭圍毆 混亂中發生槍支走火</a></li>
<li><a href="#">警察出警身中數刀:先不要告訴我父母</a></li>
<li><a href="#">大學生帶5枚手雷上火車 嚇壞安檢員</a></li>
<li><a href="#">無人機與客機擦肩而過 13趟航班停飛</a></li>
<li><a href="#">小夥救起溺水母子 自己體力不支遇難</a></li>
</ul>
</div>
<div class="bottom" id="tab4">
<section>
<img src="images/2017-08-23_214642.png"/>
</section>
<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 class="bottom" id="tab5">
<section>
<img src="images/2017-08-23_214658.png"/>
</section>
<ul>
<li><a href="#">大媽網戀被騙60多萬"愛人"竟是女婿</a></li>
<li><a href="#">男子殺友:他咋知道我女友比他老婆輕</a></li>
<li><a href="#">他接受不了我不堪的過往 我該怎麽辦</a></li>
<li><a href="#">湊合過的夫妻 最後都成了這三個樣子</a></li>
<li><a href="#">只求同日死?男子臥軌自殺拉妻子陪葬</a></li>
</ul>
</div>
</aside>
<script>
function tab(temp_tab) {
var tabs=["tab1","tab2","tab3","tab4","tab5"];
for(i=0;i<5;i++){
if(tabs[i]==temp_tab){
document.getElementById(tabs[i]).style.display="block";
}else{
document.getElementById(tabs[i]).style.display="none";
}
}
}
</script>
</body>
</html>
2、案例實現效果
案例未給出示例(搜狗tab)完整的細節實現，讀者可根據示例，自行實現其細節部分。
案例源碼文件：tab切換.zip
轉載本文請註明出處，謝謝合作！
原生JS實現tab切換--web前端開發