我一直在尝试用JavaScript创建标签。单击新选项卡时,应将活动类应用于该选项卡,并且应显示其关联的面板内容。但是,当单击另一个选项卡并且面板也没有更改时,不会应用活动类,它们只是堆叠在一起。
const tabs = document.querySelector(".tabs");
const active = document.querySelector(".active");
const panel = document.querySelector(".panel");
function onTabClick(event) {
// deactivate existing active tabs and panel
active.classList.remove('.active');
for (let i = 0; i < panel.length; i++) {
panel[i].style.display = "none";
}
// activate new tabs and panel
event.target.classList.add('.active');
let classString = event.target.innerHTML;
console.log(classString);
document.getElementsByClassName(classString)[0].style.display = "block";
}
tabs.addEventListener('click', onTabClick, false);
.tabs {
display: flex;
justify-content: space-around;
margin: 20px 2px 40px 2px;
height: 40px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
.tabs>* {
width: 100%;
color: dimgray;
height: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.tabs>*:hover:not(.active) {
background-color: rgb(220, 220, 220);
}
.tabs>.active {
color: white;
background-color: #4CAF50;
}
.panel {
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="tabs">
<div class="tab active">List</div>
<div class="tab">Grid</div>
<div class="tab">something</div>
</div>
<div class="Lists panel" style='display:block'>
panel 1 text
</div>
<div class="Grid panel">
panel 2 text
</div>
<div class="something panel">
panel 3 text
</div>
</body>
</html>
在获取特定类的所有元素时,在JavaScript中,document.querySelecto(".className")
只抓取给定类的第一个元素。要获得所有元素,您必须使用document.querySelectorAll(".className")
。
然后,当从元素添加或删除类时,不要将该点放在类名之前。因此,而不是tab[i].classList.remove(".active");
,它应该是tab[i].classList.remove("active");
。
此外,我使用了一个active
类,而不是明确隐藏面板元素,它将应用于面板关联选项卡。
最后,不应将选项卡文本用作相应面板的类名。如果选项卡文本中有多个单词,则会出现问题。我所做的是使用选项卡的data属性来指定面板的相对类,并将所有面板放在div
元素.panels
中。现在,您可以在选项卡中放置所需的文本,并使用data-target
属性,放置面板的类名称。
JavaScript的
const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".panel");
function onTabClick(event) {
// deactivate existing active tabs and panel
for (let i = 0; i < tab.length; i++) {
tab[i].classList.remove("active");
}
for (let i = 0; i < panel.length; i++) {
panel[i].classList.remove("active");
}
// activate new tabs and panel
event.target.classList.add('active');
let classString = event.target.getAttribute('data-target');
console.log(classString);
document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}
for (let i = 0; i < tab.length; i++) {
tab[i].addEventListener('click', onTabClick, false);
}
CSS
.tabs {
display: flex;
justify-content: space-around;
margin: 20px 2px 40px 2px;
height: 40px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
.tabs>* {
width: 100%;
color: dimgray;
height: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.tabs>*:hover:not(.active) {
background-color: rgb(220, 220, 220);
}
.tabs>.active {
color: white;
background-color: #4CAF50;
}
.panel {
display: none;
}
.panel.active {
display: block;
}
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="tabs">
<div class="tab active" data-target="Lists">Lists</div>
<div class="tab" data-target="Grid">Grid</div>
<div class="tab" data-target="Something">Something</div>
</div>
<div id="panels">
<div class="Lists panel active">
panel 1 text
</div>
<div class="Grid panel">
panel 2 text
</div>
<div class="Something panel">
panel 3 text
</div>
</div>
</body>
</html>