JavaScript實現(xiàn)Tab選項卡切換
更新時間：2020年02月13日 12:48:03 作者：空格-
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)Tab選項卡切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)選項卡切換的具體代碼，供大家參考，具體內容如下
會用到原生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) 是我封裝的一個dom id選擇器，在里面先拿到準備操作的事件源，遍歷拿到的數(shù)組，onmouseover鼠標移入時，再次遍歷一數(shù)組，將數(shù)組里所有的classname 變?yōu)榭?以及display樣式隱藏，在移入時，移入哪個，給哪個賦值即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
![javascript 移動鼠標得到單元格所在table表中的rowIndex位置[兼容ie,firefox]](http://img.jbzj.com/images/xgimg/bcimg0.png)
javascript 移動鼠標得到單元格所在table表中的rowIndex位置[兼容ie,firefox]
移動鼠標，得到單元格所在表中的位置,主要是學習使用js的e.srcElement.2009-12-12
這篇文章主要介紹了element-ui?實現(xiàn)輸入框下拉樹組件功能,使用element-ui的?el-input,el-tree,el-popover組件組合封裝,本文結合示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)單圖片上傳并預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
返回unix時間戳所對應的具體時間的代碼2010-07-07
我們去掉事件綁定的邏輯,發(fā)現(xiàn)只渲染dom元素,不綁定事件的時間,僅僅125ms,可見事件綁定的時間消耗還是很大的 ,尤其是第一種方式,也就是Dom Level 0 Event,最為耗時2012-12-12
這篇文章主要介紹了微信小程序官方動態(tài)自定義底部tabBar的例子，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下2017-08-08
基于BootStrap Metronic開發(fā)框架經(jīng)驗小結【八】框架功能總體界面介紹
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗小結【八】框架功能總體界面介紹 的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了javascript圖片預加載的方法,實例分析了javascript實現(xiàn)圖片預加載的方法與相關注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
下面小編就為大家?guī)硪黄獪\談JavaScript變量的自動轉換和語句。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06