說到tab選項卡，大家應該都不陌生吧，那你知道如何用原生JS實作tab選項卡的切換效果嗎？這篇文章就跟大家分享tab選項卡的製作方法以及js實現tab切換效果的程式碼，有一定的參考價值，有興趣的朋友可以參考一下。
用原生JS實作tab選項卡切換效果需要用到很多JavaScript知識，例如：function，document.getElementById（），滑鼠事件等等，如有不清楚的小夥伴可以參考PHP中文網的相關文章，或訪問JavaScript影片教學。
實例描述：實現Tab的切換效果，我們很容易想到的是為每一個要控制的標籤添加id，然後用滑鼠事件，使用id獲取每個元素，從而控制每個元素的樣式。
HTML部分：
<div class="tab-head">
<h2 id="tab1" onmouseover="changeTab1()" class="selected">按钮1</h2>
<h2 id="tab2" onmouseover="changeTab2()">按钮2</h2>
<h2 id="tab3" onmouseover="changeTab3()">按钮3</h2>
</div>
<div class="tab-content">
<div id="c1" class="show">content1</div>
<div id="c2">content2</div>
<div id="c3">content3</div>
</div>CSS部分：
*{padding: 0;margin: 0;}
h2 {
width: 150px;
height: 30px;
margin: 0 auto;
float: left;
text-align: center;
}
.tab-content div{
width: 148px;
height: 150px;
border: 1px solid black;
display: none;
position: relative;
background: pink;
}
#c1{
position: absolute;
top: 30px;
left: 0;
}
#c2{
position: absolute;
top: 30px;
left: 150px;
}
#c3{
position: absolute;
top: 30px;
left: 300px;
}
.selected {
background-color: cornflowerblue;
}
.tab-content .show{
display: block;
}JavaScript部分：
var tab1 = document.getElementById('tab1'),
tab2 = document.getElementById('tab2'),
tab3 = document.getElementById('tab3'),
c1 = document.getElementById('c1'),
c2 = document.getElementById('c2'),
c3 = document.getElementById('c3');
function changeTab1() {
tab1.className = 'selected';
tab2.className = '';
tab3.className = '';
c1.className = 'show'
c2.className = '';
c3.className = '';
}
function changeTab2() {
tab1.className = '';
tab2.className = 'selected';
tab3.className = '';
c1.className = '';
c2.className = 'show';
c3.className = '';
}
function changeTab3() {
tab1.className = '';
tab2.className = '';
tab3.className = 'selected';
c1.className = ''
c2.className = '';
c3.className = 'show';
}效果如圖所示：
#這個方法，有幾個元素就有幾個id，而且每個tab都要寫function，如果要增加tab，還要增加id和function，程式碼冗餘，不容易擴展，所以此方法適合tab不多的情況。
以上跟大家分享如何用原生JS實作tab選項卡的切換效果，步驟很詳細，初學者可以自己動手嘗試，看看能不能實現tab切換的效果，希望這篇文章對你有所幫助！
【相關教學推薦】
1. JavaScript中文參考手冊
2. CSS3影片教學
#3. bootstrap教程
以上是如何用原生JS實作tab選項卡的切換效果（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
