快捷導(dǎo)航

JS實(shí)現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能示例

更新時(shí)間：2019年08月03日 10:13:22 作者：sennyla

這篇文章主要介紹了JS實(shí)現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能,結(jié)合實(shí)例形式分析了JavaScript基于事件響應(yīng)、元素遍歷實(shí)現(xiàn)頁(yè)面tab切換功能相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能。分享給大家供大家參考，具體如下：

思路：一層循環(huán)遍歷操作的元素并獲取當(dāng)前遍歷到的元素的下標(biāo)，通過(guò)下標(biāo)去選擇顯示對(duì)應(yīng)的內(nèi)容模塊。

二層循環(huán)將元素恢復(fù)操作前的狀態(tài)。

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; //存放當(dāng)前元素的下標(biāo)
 fbLis[i].onclick = function(){
  for(var j=0; j< fbLis.length; j++){
   fbLis[j].className="";
   aDivs[j].style.display = "none";
  }
  //給當(dāng)前點(diǎn)擊的元素添加活躍標(biāo)記
  this.className="liactive";
  //顯示對(duì)應(yīng)的模塊內(nèi)容
  aDivs[this.index].style.display = "block";
 };
}

<div>
 <ul id="oUl">
  <li class="liactive">首頁(yè)</li>
  <li>產(chǎn)品</li>
  <li>合作</li>
 </ul>
</div>
<div class="theDiv" id="oDiv1" style="display:block;">首頁(yè)模塊內(nèi)容：這是首頁(yè)</div>
<div class="theDiv" id="oDiv2">產(chǎn)品模塊內(nèi)容：這是產(chǎn)品</div>
<div class="theDiv" id="oDiv3">合作模塊內(nèi)容：這是合作</div>