如何使用 CSS 网格区域显示选项卡内容
How to show the tab content using CSS Grid areas
我创建了一个使用 CSS 网格区域的选项卡式界面。
但是标签内容不知何故没有显示，我在控制台中得到了 null 的值。
代码如下所示：
function setupTabs() {
document.querySelectorAll('.tabs_button').forEach(button => {
button.addEventListener('click', () => {
const sideBar = button.parentElement;
const tabsContainer = document.querySelector("section");
const tabNumber = button.dataset.forTab;
const tabToActivate =
tabsContainer.querySelector('.tabs_content[data-tab="${tabNumber}"]');
console.log(tabsContainer);
console.log(tabNumber);
console.log(tabToActivate);
sideBar.querySelectorAll(".tabs_button").forEach(button => {
button.classList.remove("tabs_button--active");
});
tabsContainer.querySelectorAll(".tabs_content").forEach(tab => {
tab.classList.remove("tab_content--active");
});
button.classList.add("tabs_button--active")
tabToActivate.classList.add("tabs_content--active")
});
});
}
document.addEventListener('DOMContentLoaded', () => {
setupTabs();
});
<div class="wrapper">
<nav class="tabs_sidebar">
<button class="tabs_button tabs_button--active" data-for-tab="1">Tab #1</button>
<button class="tabs_button" data-for-tab="2">Tab #2</button>
<button class="tabs_button" data-for-tab="3">Tab #3</button>
</nav>
<section id="main_con" class="tabs_content tabs_content--active">
<div class="tabs_content tabs_content--active" data-tab="1">
<h2>Tab #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
<div class="tabs_content" data-tab="2">
<h2>Tab #2</h2>
<p>Nunc vel risus commodo viverra maecenas. Egestas congue quisque egestas diam. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a scelerisque purus semper eget.
Viverra justo nec ultrices dui sapien eget mi proin. Lacus vel facilisis volutpat est velit egestas dui id. Magna fringilla urna porttitor rhoncus dolor purus non. Cursus risus at ultrices mi tempus imperdiet. Ornare aenean euismod elementum nisi.
Morbi blandit cursus risus at ultrices. Vel eros donec ac odio tempor orci. Netus et malesuada fames ac turpis egestas integer. Interdum varius sit amet mattis vulputate enim nulla. Nam libero justo laoreet sit. Imperdiet proin fermentum leo vel
orci porta non pulvinar. Netus et malesuada fames ac turpis egestas sed tempus urna. Integer quis auctor elit sed vulputate mi. Pellentesque sit amet porttitor eget. Tempor commodo ullamcorper a lacus vestibulum. Laoreet sit amet cursus sit amet
dictum sit amet justo. Vulputate ut pharetra sit amet aliquam. Sed sed risus pretium quam vulputate. Eget duis at tellus at urna condimentum. Sit amet consectetur adipiscing elit. A scelerisque purus semper eget duis at tellus at urna. Sapien
eget mi proin sed. </p>
</div>https://whosebug.com/posts/66941962/edit#
<div class="tabs_content" data-tab="3">
<h2>Tab #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus. Integer
ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
</section>
</div>
非常感谢任何帮助。
提前致谢
这样试试。
您的代码有误。
function setupTabs () {
document.querySelectorAll('.tabs_button').forEach(button => {
button.addEventListener('click', () => {
const sideBar = button.parentElement;
const tabsContainer = document.querySelector("section");
const tabNumber = button.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`.tabs_content[data-tab='${tabNumber}']`);// made a mistake here.
console.log(tabsContainer);
console.log(tabNumber);
console.log(tabToActivate);
sideBar.querySelectorAll(".tabs_button").forEach(button => {
button.classList.remove("tabs_button--active");
});
tabsContainer.querySelectorAll(".tabs_content").forEach(tab => {
tab.classList.remove("tab_content--active");
});
button.classList.add("tabs_button--active")
tabToActivate.classList.add("tabs_content--active")
});
});
}
document.addEventListener('DOMContentLoaded', () => {
setupTabs();
});
the HTML looks like this:
<div class="wrapper">
<nav class="tabs_sidebar">
<button class="tabs_button tabs_button--active" data-for-tab="1">Tab #1</button>
<button class="tabs_button" data-for-tab="2">Tab #2</button>
<button class="tabs_button" data-for-tab="3">Tab #3</button>
</nav>
<section id="main_con" class="tabs_content tabs_content--active">
<div class="tabs_content tabs_content--active" data-tab="1">
<h2>Tab #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
<div class="tabs_content" data-tab="2">
<h2>Tab #2</h2>
<p>Nunc vel risus commodo viverra maecenas. Egestas congue quisque egestas diam. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Viverra justo nec ultrices dui sapien eget mi proin. Lacus vel facilisis volutpat est velit egestas dui id. Magna fringilla urna porttitor rhoncus dolor purus non. Cursus risus at ultrices mi tempus imperdiet. Ornare aenean euismod elementum nisi. Morbi blandit cursus risus at ultrices. Vel eros donec ac odio tempor orci. Netus et malesuada fames ac turpis egestas integer. Interdum varius sit amet mattis vulputate enim nulla. Nam libero justo laoreet sit. Imperdiet proin fermentum leo vel orci porta non pulvinar. Netus et malesuada fames ac turpis egestas sed tempus urna. Integer quis auctor elit sed vulputate mi. Pellentesque sit amet porttitor eget. Tempor commodo ullamcorper a lacus vestibulum. Laoreet sit amet cursus sit amet dictum sit amet justo. Vulputate ut pharetra sit amet aliquam. Sed sed risus pretium quam vulputate. Eget duis at tellus at urna condimentum. Sit amet consectetur adipiscing elit. A scelerisque purus semper eget duis at tellus at urna. Sapien eget mi proin sed. </p>
</div>https://whosebug.com/posts/66941962/edit#
<div class="tabs_content" data-tab="3">
<h2>Tab #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
</section>
</div>
我创建了一个使用 CSS 网格区域的选项卡式界面。
但是标签内容不知何故没有显示，我在控制台中得到了 null 的值。
代码如下所示：
function setupTabs() {
document.querySelectorAll('.tabs_button').forEach(button => {
button.addEventListener('click', () => {
const sideBar = button.parentElement;
const tabsContainer = document.querySelector("section");
const tabNumber = button.dataset.forTab;
const tabToActivate =
tabsContainer.querySelector('.tabs_content[data-tab="${tabNumber}"]');
console.log(tabsContainer);
console.log(tabNumber);
console.log(tabToActivate);
sideBar.querySelectorAll(".tabs_button").forEach(button => {
button.classList.remove("tabs_button--active");
});
tabsContainer.querySelectorAll(".tabs_content").forEach(tab => {
tab.classList.remove("tab_content--active");
});
button.classList.add("tabs_button--active")
tabToActivate.classList.add("tabs_content--active")
});
});
}
document.addEventListener('DOMContentLoaded', () => {
setupTabs();
});
<div class="wrapper">
<nav class="tabs_sidebar">
<button class="tabs_button tabs_button--active" data-for-tab="1">Tab #1</button>
<button class="tabs_button" data-for-tab="2">Tab #2</button>
<button class="tabs_button" data-for-tab="3">Tab #3</button>
</nav>
<section id="main_con" class="tabs_content tabs_content--active">
<div class="tabs_content tabs_content--active" data-tab="1">
<h2>Tab #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
<div class="tabs_content" data-tab="2">
<h2>Tab #2</h2>
<p>Nunc vel risus commodo viverra maecenas. Egestas congue quisque egestas diam. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a scelerisque purus semper eget.
Viverra justo nec ultrices dui sapien eget mi proin. Lacus vel facilisis volutpat est velit egestas dui id. Magna fringilla urna porttitor rhoncus dolor purus non. Cursus risus at ultrices mi tempus imperdiet. Ornare aenean euismod elementum nisi.
Morbi blandit cursus risus at ultrices. Vel eros donec ac odio tempor orci. Netus et malesuada fames ac turpis egestas integer. Interdum varius sit amet mattis vulputate enim nulla. Nam libero justo laoreet sit. Imperdiet proin fermentum leo vel
orci porta non pulvinar. Netus et malesuada fames ac turpis egestas sed tempus urna. Integer quis auctor elit sed vulputate mi. Pellentesque sit amet porttitor eget. Tempor commodo ullamcorper a lacus vestibulum. Laoreet sit amet cursus sit amet
dictum sit amet justo. Vulputate ut pharetra sit amet aliquam. Sed sed risus pretium quam vulputate. Eget duis at tellus at urna condimentum. Sit amet consectetur adipiscing elit. A scelerisque purus semper eget duis at tellus at urna. Sapien
eget mi proin sed. </p>
</div>https://whosebug.com/posts/66941962/edit#
<div class="tabs_content" data-tab="3">
<h2>Tab #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus. Integer
ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
</section>
</div>
非常感谢任何帮助。
提前致谢
这样试试。 您的代码有误。
function setupTabs () {
document.querySelectorAll('.tabs_button').forEach(button => {
button.addEventListener('click', () => {
const sideBar = button.parentElement;
const tabsContainer = document.querySelector("section");
const tabNumber = button.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`.tabs_content[data-tab='${tabNumber}']`);// made a mistake here.
console.log(tabsContainer);
console.log(tabNumber);
console.log(tabToActivate);
sideBar.querySelectorAll(".tabs_button").forEach(button => {
button.classList.remove("tabs_button--active");
});
tabsContainer.querySelectorAll(".tabs_content").forEach(tab => {
tab.classList.remove("tab_content--active");
});
button.classList.add("tabs_button--active")
tabToActivate.classList.add("tabs_content--active")
});
});
}
document.addEventListener('DOMContentLoaded', () => {
setupTabs();
});
the HTML looks like this:
<div class="wrapper">
<nav class="tabs_sidebar">
<button class="tabs_button tabs_button--active" data-for-tab="1">Tab #1</button>
<button class="tabs_button" data-for-tab="2">Tab #2</button>
<button class="tabs_button" data-for-tab="3">Tab #3</button>
</nav>
<section id="main_con" class="tabs_content tabs_content--active">
<div class="tabs_content tabs_content--active" data-tab="1">
<h2>Tab #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
<div class="tabs_content" data-tab="2">
<h2>Tab #2</h2>
<p>Nunc vel risus commodo viverra maecenas. Egestas congue quisque egestas diam. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Viverra justo nec ultrices dui sapien eget mi proin. Lacus vel facilisis volutpat est velit egestas dui id. Magna fringilla urna porttitor rhoncus dolor purus non. Cursus risus at ultrices mi tempus imperdiet. Ornare aenean euismod elementum nisi. Morbi blandit cursus risus at ultrices. Vel eros donec ac odio tempor orci. Netus et malesuada fames ac turpis egestas integer. Interdum varius sit amet mattis vulputate enim nulla. Nam libero justo laoreet sit. Imperdiet proin fermentum leo vel orci porta non pulvinar. Netus et malesuada fames ac turpis egestas sed tempus urna. Integer quis auctor elit sed vulputate mi. Pellentesque sit amet porttitor eget. Tempor commodo ullamcorper a lacus vestibulum. Laoreet sit amet cursus sit amet dictum sit amet justo. Vulputate ut pharetra sit amet aliquam. Sed sed risus pretium quam vulputate. Eget duis at tellus at urna condimentum. Sit amet consectetur adipiscing elit. A scelerisque purus semper eget duis at tellus at urna. Sapien eget mi proin sed. </p>
</div>https://whosebug.com/posts/66941962/edit#
<div class="tabs_content" data-tab="3">
<h2>Tab #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas vitae felis non rhoncus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus. Integer ultrices dolor nisl, vel suscipit dolor tristique ac. Maecenas pellentesque egestas placerat. Phasellus consequat erat risus </p>
</div>
</section>
</div>