如果单击其子选项卡，如何激活“主选项卡 1”和“主选项卡 2”？。
所以这就是我想要发生的情况，如果我单击“外部选项卡 1”和“外部选项卡 2”，它将激活父级“主选项卡 1”，如果我单击“外部选项卡 3”和“外部选项卡 4” ” 它将激活父级“主选项卡 2”。
为了更好地理解，请检查下面的代码。这里还有 codepen https://codepen.io/.
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".content");
tabs.onclick = e => {
const id = e.target.dataset.id;
if (id) {
tabButton.forEach(btn => {
btn.classList.remove("active");
});
e.target.classList.add("active");
contents.forEach(content => {
content.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
}
}@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');
body {
font-family: 'Jost', sans-serif;
background-color: #f0f5ff;
}
h1 {
font-size: 48px;
color: #232c3d;
text-align:center;
}
.wrapper {
width: 590px;
margin: auto;
background-color: white;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
}
.buttonWrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
button {
letter-spacing: 3px;
border: none;
padding: 10px;
background-color: green;
color: #232c3d;
font-size: 18px;
cursor: pointer;
transition: 0.5s;
}
button:hover {
background-color: inherit;
}
button.active {
background-color: orange;
}
.active {
background-color: white;
}
p {
text-align: left;
padding: 10px;
}
.content {
display: none;
padding: 10px 20px;
}
.content.active {
display: block;
}<body>
<h1>TOGGLE TABS</h1>
<div class="wrapper">
<div class="buttonWrapper">
<button class="tab-button active" style="border-top-left-radius: 10px;" data-id="maintab1">Main tab 1</button>
<button class="tab-button" data-id="maintab2">Main tab 2</button>
</div>
<div class="contentWrapper">
<div class="content active" id="maintab1">
Main Tab 1 Content
</div>
<div class="content" id="maintab2">
Main Tab 2 Content
</div>
</div>
<div class="outer-tab">
<button class="" style="border-top-left-radius: 10px;" data-id="">Outer tab 1</button>
<button class="" style="border-top-left-radius: 10px;" data-id="">Outer tab 2</button>
<button class="" style="border-top-left-radius: 10px;" data-id="">Outer tab 3</button>
<button class="" style="border-top-left-radius: 10px;" data-id="">Outer tab 4</button>
</div>
</div>
</body>
</html>解释
有很多方法可以实现你想要的，我只会向你展示其中一种来激励你。
第 1 步：将新类 “main-tab-btn” 添加到父包装器，以将它们与子按钮区分开。
第 2 步：将类 “child-tab-btn” 添加到子包装器中，以将其与父按钮区分开来
第3步：为子按钮添加相应的属性“data-id”
HTML
<body>
<h1>TOGGLE TABS</h1>
<div class="wrapper">
<div class="buttonWrapper">
<button class="tab-button main-tab-btn active" style="border-top-left-radius: 10px;" data-id="maintab1">Main tab 1</button>
<button class="tab-button main-tab-btn" data-id="maintab2">Main tab 2</button>
</div>
<div class="contentWrapper">
<div class="content active" id="maintab1">
Main Tab 1 Content
</div>
<div class="content" id="maintab2">
Main Tab 2 Content
</div>
</div>
<div class="outer-tab">
<button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 1</button>
<button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 2</button>
<button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 3</button>
<button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 4</button>
</div>
</div>
</body>
</html>
Javascript
第 1 步：使用 querySelectorAll 对元素（父元素、子元素、内容）进行相应分组
第2步：为父子添加相应的EventListener
const mainTabs = document.querySelectorAll(".main-tab-btn");
const childTabs = document.querySelectorAll(".child-tab-btn");
const contents = document.querySelectorAll(".content");
const buttons = document.querySelectorAll("button");
function SetContent(tabIdx)
{
// reset all contents
contents.forEach(content => {
content.classList.remove("active");
});
const content = document.getElementById(tabIdx);
content.classList.add("active");
}
function ResetButtons(){
buttons.forEach(btn=> {
btn.classList.remove("active");
});
}
// add eventlisteners to all the maintab buttons
mainTabs.forEach(function(tab){
tab.addEventListener("click", function(e){
var id = e.target.getAttribute("data-id");
SetContent(id);
ResetButtons();
e.target.classList.add("active");
});
});
// add eventlisteners to all the childtabs button
childTabs.forEach(function(tab){
tab.addEventListener("click", function(e){
var id = e.target.getAttribute("data-id");
SetContent(id);
ResetButtons();
const button = document.querySelector(`.main-tab-btn[data-id="${id}"]`);
button.classList.add("active");
e.target.classList.add("active");
})
})