本文實例為大家分享了js選項卡切換效果的具體代碼，供大家參考，具體內容如下
實現思路：
1、首先獲取id元素。
2、for循環歷遍按鈕元素添加onclick事件。
3、排他思想，點擊按鈕時設置所有選項卡按鈕樣式為空，利用this關鍵字指定當前選項卡獲得高亮樣式。
4、下面的多個div內容塊以此類推。
源代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>簡單的選項卡切換（仿Hao123導航）</title></head><style> * { margin: 0; padding: 0; } .box { width: 278px; margin: 0 auto; margin-top: 100px; background-color: #F7F7F8; overflow: hidden; } .btn button { outline:none; color: #616161; font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",/5b8b/4f53; border: none; height: 34px; width: 51px; background-color: #F7F7F8; float: left; cursor: pointer; } .box .btn i { height: 16px; border-left: 1px solid #EAEAEA; margin-top: 9px; float: left; _font-size: 0px; } .box .btn button:hover { color: #0AA770; } .box .btn s { cursor: pointer; text-decoration: none; font:14px/34px arial,"Hiragino Sans GB","Hiragino Sans GB W3",/5b8b/4f53; } #box1 #btns .clickbtn { border-top: 1px solid #0AA770; color: #0AA770; } .bottom { display: none; position: absolute; width: 278px; height: 110px; color: #fff; text-align: center; font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",/5b8b/4f53; } .bottom a { color: #fff; position: relative; top: -20px; left: 0px; text-decoration: none; } .bottom a:hover { text-decoration: underline; }</style><script> window.onload = function(){ var btns = document.getElementById("btns").getElementsByTagName("button"); var divs = document.getElementById("bottomdivs").getElementsByTagName("div"); btns[0].className = "clickbtn"; for(var i = 0;i<btns.length;i++){ btns[i].index = i; btns[i].onclick = function(){ //alert(this.index); for(var j = 0;j<btns.length;j++){ btns[j].className = ""; } this.className = "clickbtn"; for(var b = 0;b<btns.length;b++){ divs[b].style.display = "none"; } divs[this.index].style.display = "block"; } } }</script><body><div class="box" id="box1"> <div class="btn" id="btns"> <button>推介</button> <i></i> <button>社會</button> <i></i> <button>娛樂</button> <i></i> <button>軍事</button> <i></i> <button>體育</button> <s>+</s> </div> <div id="bottomdivs"> <div class="bottom" style="display: block"> <img src="images/01.jpg" alt=""> <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >小伙直播時遭遇“鬧鬼”事件 全過程被拍下</a></h4> </div> <div class="bottom"> <img src="images/02.jpg" alt=""> <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >男子穿新郎裝背充氣娃娃游街</a></h4> </div> <div class="bottom"> <img src="images/03.jpg" alt=""> <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >她滿足所有人對才女的幻想</a></h4> </div> <div class="bottom"> <img src="images/04.jpg" alt=""> <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >王毅回應中美是否會在南海發生沖突</a></h4> </div> <div class="bottom"> <img src="images/05.jpg" alt=""> <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >劉翔與嬌妻秀恩愛 豪車曝光車牌太搶眼</a></h4> </div> </div></div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
