提问人：clarkf 提问时间：10/7/2023 最后编辑：clarkf 更新时间：10/7/2023 访问量：34
如何使用javascript激活父标签内容？
How to activate the parent tab content using javascript?
问：
如果我单击其子选项卡，如何激活“主选项卡 1”和“主选项卡 2”？
因此，如果我单击“外部选项卡 1”和“外部选项卡 2”，它将激活父“主选项卡 1”，如果我单击“外部选项卡 3”和“外部选项卡 4”，它将激活父“主选项卡 2”。
为了更好地理解，请查看下面的代码。这里还有 codepen https://codepen.io/。
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");
})
})@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;
}<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 class="outer-content">
<div class="outer-tab-content">Outer tab 1 content</div>
<div class="outer-tab-content">Outer tab 2 content</div>
<div class="outer-tab-content">Outer tab 3 content</div>
<div class="outer-tab-content">Outer tab 4 content</div>
</div>
</div>答：
1赞
JW Yap
10/7/2023
#1
解释
有很多方法可以实现你想要的，我只向你展示其中一种来激励你。
第 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");
})
})
评论
0赞
clarkf
10/7/2023
太好了！我还有其他问题，我已经更新了html片段，添加了“outer-content”结构。所以这就是我想要发生的事情，如果我单击“外部选项卡 1”它将显示“外部选项卡 1 内容”，如果我单击“外部选项卡 2”它将显示“外部选项卡 2 内容”等......
0赞
JW Yap
10/7/2023
嗨，也许您可以尝试添加其他属性，例如“child-data-id”到您的外标签按钮中，并相应地激活您的子内容
0赞
clarkf
10/7/2023
嗨，你有没有机会帮我？:)，顺便说一句，我会尝试添加这些数据。
评论