欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年08月03日 10:13:22   作者：sennyla  
這篇文章主要介紹了JS實現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能,結(jié)合實例形式分析了JavaScript基于事件響應(yīng)、元素遍歷實現(xiàn)頁面tab切換功能相關(guān)操作技巧,需要的朋友可以參考下

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

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

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

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

<!-- HTML -->

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

<!-- 效果 -->

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

最新評論