溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS實現的tab切換并顯示相應內容模塊功能。分享給大家供大家參考，具體如下：
思路：一層循環遍歷操作的元素并獲取當前遍歷到的元素的下標，通過下標去選擇顯示對應的內容模塊。
二層循環將元素恢復操作前的狀態。
<!--- JS -->
var fbUls =document.getElementById("oUl");
var fbLis = fbUls.getElementsByTagName("li");
var aDivs = document.getElementsByClassName("theDiv");
for(var i = 0,val=fbLis.length;i<val;i++){
fbLis[i].index = i; //存放當前元素的下標
fbLis[i].onclick = function(){
for(var j=0; j< fbLis.length; j++){
fbLis[j].className="";
aDivs[j].style.display = "none";
}
//給當前點擊的元素添加活躍標記
this.className="liactive";
//顯示對應的模塊內容
aDivs[this.index].style.display = "block";
};
}
<!-- HTML -->
<div> <ul id="oUl"> <li class="liactive">首頁</li> <li>產品</li> <li>合作</li> </ul> </div> <div class="theDiv" id="oDiv1" >首頁模塊內容：這是首頁</div> <div class="theDiv" id="oDiv2">產品模塊內容：這是產品</div> <div class="theDiv" id="oDiv3">合作模塊內容：這是合作</div>
<!-- 效果 -->
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
