快捷導(dǎo)航

JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換

更新時(shí)間：2020年02月13日 12:48:03 作者：空格-

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)選項(xiàng)卡切換的具體代碼，供大家參考，具體內(nèi)容如下

會(huì)用到原生js的dom操作

html

<body>
 <div id="tab">
 <div id="tab_header">
  <ul>
  <li class="seclect">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </div>
 <div id="tab_body">
  <div class="dom" style="display: block;">
  <ul>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>2</li>
   <li>2</li>
   <li>2</li>
   <li>2</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>3</li>
   <li>3</li>
   <li>3</li>
   <li>3</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>4</li>
   <li>4</li>
   <li>4</li>
   <li>4</li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li>5</li>
   <li>5</li>
   <li>5</li>
   <li>5</li>
  </ul>
  </div>
 </div>
</div>

css就不放了

js

window.onload = function(){
 var allLis = $('tab_header').getElementsByTagName('li');
 var allDoms = $('tab_body').getElementsByClassName('dom');
 console.log(allLis,allDoms);
 // 遍歷拿到的allLis
 for(var i =0; i<allLis.length;i++){
 var li = allLis[i];
 li.index = i; 
 li.onmouseover = function(){
  // 排他思想 將所有的class清空
  for(var j = 0;j<allLis.length;j++){
  allLis[j].className = '';
  allDoms[j].style.display='none';
  }
  this.className = 'seclect';
  allDoms[this.index].style.display='block';
 }
 }
}
function $(id){
 return typeof id === "string" ? document.getElementById(id) : null;
}

這里面的 function $(id) 是我封裝的一個(gè)dom id選擇器，在里面先拿到準(zhǔn)備操作的事件源，遍歷拿到的數(shù)組，onmouseover鼠標(biāo)移入時(shí)，再次遍歷一數(shù)組，將數(shù)組里所有的classname 變?yōu)榭?以及display樣式隱藏，在移入時(shí)，移入哪個(gè)，給哪個(gè)賦值即可。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript 移動(dòng)鼠標(biāo)得到單元格所在table表中的rowIndex位置[兼容ie,firefox]
移動(dòng)鼠標(biāo)，得到單元格所在表中的位置,主要是學(xué)習(xí)使用js的e.srcElement.
2009-12-12
element-ui?實(shí)現(xiàn)輸入框下拉樹(shù)組件功能
這篇文章主要介紹了element-ui?實(shí)現(xiàn)輸入框下拉樹(shù)組件功能,使用element-ui的?el-input,el-tree,el-popover組件組合封裝,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-05-05
JavaScript實(shí)現(xiàn)單圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)單圖片上傳并預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
js 返回時(shí)間戳所對(duì)應(yīng)的具體時(shí)間
返回unix時(shí)間戳所對(duì)應(yīng)的具體時(shí)間的代碼
2010-07-07
給頁(yè)面渲染時(shí)間加速干掉Dom Level 0 Event
我們?nèi)サ羰录壎ǖ倪壿?發(fā)現(xiàn)只渲染dom元素,不綁定事件的時(shí)間,僅僅125ms,可見(jiàn)事件綁定的時(shí)間消耗還是很大的 ,尤其是第一種方式,也就是Dom Level 0 Event,最為耗時(shí)
2012-12-12
微信小程序官方動(dòng)態(tài)自定義底部tabBar的例子
這篇文章主要介紹了微信小程序官方動(dòng)態(tài)自定義底部tabBar的例子，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
詳解JS中的柯里化(currying)
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下
2017-08-08
基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【八】框架功能總體界面介紹
這篇文章主要介紹了基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【八】框架功能總體界面介紹的相關(guān)資料,需要的朋友可以參考下
2016-05-05
javascript圖片預(yù)加載實(shí)例分析
這篇文章主要介紹了javascript圖片預(yù)加載的方法,實(shí)例分析了javascript實(shí)現(xiàn)圖片預(yù)加載的方法與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
淺談JavaScript變量的自動(dòng)轉(zhuǎn)換和語(yǔ)句
下面小編就為大家?guī)?lái)一篇淺談JavaScript變量的自動(dòng)轉(zhuǎn)換和語(yǔ)句。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06