html部分：

<div id="tab">
<ul>
<li class="active">第一個</li>
<li>第二個</li>
<li>第三個</li>
</ul>
<div class="select" style="display:block;">1</div>
<div class="select">2</div>
<div class="select">3</div>
</div>

css部分：

#tab{
border: 1px solid #ccc;
float: left;
}
#tab li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
list-style: none;
}
#tab li.active{
background: #ccc;
}
.select{
display: none;
float: left;
width: 300px;
height: 300px;
border-top: 1px solid #ccc;
}

js部分：

var tabli = document.getElementsByTagName('li');
var tabdiv = document.getElementsByClassName('select');
for(var i=0; i<tabli.length; i++){
tabli[i].index = i; //自定義屬性
tabli[i].οnclick=function(){
for(var i=0;i<tabli.length;i++){
tabli[i].className = '';
tabdiv[i].style.display = 'none';
}
this.className= 'active';
tabdiv[this.index].style.display = 'block';
}
}

以上就是原生js選項卡的代碼

轉載于:https://www.cnblogs.com/wu-web/p/6804991.html

總結

以上是生活随笔為你收集整理的原生js选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。