javascript - 如何使选项卡中的事件按钮具有 "active"类？

Question

我需要你的帮助。

我必须根据事件的选项卡在按钮中添加“事件”类(我是 javascript 的新手)我使用的是纯 javascript。

HTML:

<button class="buttonTab" id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</button>
<button class="buttonTab" id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</button>

<br />

<div class="contentTab" id="tab1Content" style="display: block;">
     This is the content.
</div>
<div class="contentTab" id="tab2Content" style="display: none;">
     This is the content2.
</div>

CSS:

.buttonTab {
   color: #FFFFFF;
   background-color: #333333;
}
.buttonTab.active {
   color: #333333;
   background-color: #FFFFFF;
}

JavaScript:

function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById('tab1Content').style.display="none";
document.getElementById('tab2Content').style.display="none";

//Show the Selected Tab
document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
}

我希望你能帮助我，谢谢。

Answer 1

您可以向元素的 classList 添加/删除类。

function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById('tab1Content').style.display="none";
document.getElementById('tab2Content').style.display="none";

//Show the Selected Tab
document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
if(tabIndex==1){
document.getElementById('tab' + 2 ).classList.remove("active");
}
else if(tabIndex==2){
document.getElementById('tab' + 1 ).classList.remove("active");
}
document.getElementById('tab' + tabIndex ).classList.add("active");
}

.buttonTab {
   color: #FFFFFF;
   background-color: #333333;
}
.buttonTab.active {
   color: #333333;
   background-color: #FFFFFF;
}

<button class="buttonTab" id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</button>
<button class="buttonTab" id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</button>

<br />

<div class="contentTab" id="tab1Content" style="display: block;">
     This is the content.
</div>
<div class="contentTab" id="tab2Content" style="display: none;">
     This is the content2.
</div>