JS實現的tab切換並顯示相應內容模塊功能示例

這篇文章主要介紹了JS實現的tab切換並顯示相應內容模塊功能,結合實例形式分析了JavaScript基於事件響應、元素遍歷實現頁面tab切換功能相關操作技巧,需要的朋友可以參考下

本文實例講述了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" style="display:block;">首頁模塊內容：這是首頁</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程序設計有所幫助。