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>

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

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

您可能感興趣的文章:

JS
tab切換

相關(guān)文章

javascript計(jì)算用戶打開(kāi)網(wǎng)頁(yè)的停留時(shí)間
本文介紹了javascript計(jì)算用戶打開(kāi)網(wǎng)頁(yè)的停留時(shí)間，大家參考使用吧
2014-01-01
使用webpack-dev-server處理跨域請(qǐng)求的方法
本篇文章主要介紹了使用webpack-dev-server處理跨域請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
淺談一種讓小程序支持JSX語(yǔ)法的新思路
這篇文章主要介紹了淺談一種讓小程序支持JSX語(yǔ)法的新思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06
js實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
JS簡(jiǎn)單實(shí)現(xiàn)String轉(zhuǎn)Date的方法
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)String轉(zhuǎn)Date的方法,涉及JavaScript字符串與日期相互轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下
2016-03-03
Javascript如何實(shí)現(xiàn)對(duì)象扁平化實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于Javascript如何實(shí)現(xiàn)對(duì)象扁平化的扁平化處理簡(jiǎn)而言之就是對(duì)對(duì)象中的對(duì)象提取出來(lái),放在一個(gè)對(duì)象里面,形象的說(shuō)就是把兒子的后代當(dāng)成自己的兒子,下面相關(guān)資料,需要的朋友可以參考下
2022-11-11
DWR內(nèi)存兼容及無(wú)法調(diào)用問(wèn)題解決方案
這篇文章主要介紹了DWR內(nèi)存兼容及無(wú)法調(diào)用問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
跨域表單提交狀態(tài)的變相判斷代碼
通過(guò)表單在iframe內(nèi)向一個(gè)跨域的url提交的時(shí)候，如何判斷提交成功了呢？這個(gè)，基本上，很難，因?yàn)闉g覽器安全沙箱的限制，我們沒(méi)有辦法通過(guò)獲得iframe內(nèi)部不同域頁(yè)面的信息。
2009-11-11
如何創(chuàng)建?JavaScript?自定義事件
這篇文章主要介紹了如何創(chuàng)建?JavaScript?自定義事件，我們將通過(guò)文章學(xué)習(xí)到有關(guān)創(chuàng)建自定義事件，偵聽(tīng)自定義事件以及創(chuàng)建雙擊自定義事件所要了解的內(nèi)容,需要的朋友可以參考一下
2022-05-05
JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
一般來(lái)說(shuō),JavaScript中的數(shù)組是稀疏的,也就是說(shuō),數(shù)組中的元素之間可以有空隙,因?yàn)橐粋€(gè)數(shù)組其實(shí)就是一個(gè)鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組
2012-09-09