JavaScript實現Tab選項卡切換
阿新 • • 發佈：2020-02-14
本文例項為大家分享了js實現選項卡切換的具體程式碼，供大家參考，具體內容如下
會用到原生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選擇器，在裡面先拿到準備操作的事件源，遍歷拿到的陣列，onmouseover滑鼠移入時，再次遍歷一陣列，將數組裡所有的classname 變為空,以及display樣式隱藏，在移入時，移入哪個，給哪個賦值即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。