gpt4 book ai didi

javascript - 如何在javascript中创建标签?

转载 作者:行者123 更新时间:2023-11-28 14:25:55 25 4
gpt4 key购买 nike

我一直在尝试用 JavaScript 创建标签。单击新选项卡时,应将事件类应用于该选项卡,并应显示其关联的面板内容。但是,当单击另一个选项卡时,active 类 不会被应用,面板 也不会发生变化,它们只是相互堆叠。

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 类,它将应用于面板关联的选项卡。

最后,您不应使用选项卡文本作为相应面板的类名。当您在选项卡文本中有多个单词时,这将是有问题的。我所做的是使用选项卡的数据属性来指定面板的相关类,并将所有面板放在 div 元素 .panels 中。现在您可以在选项卡中放置任何您想要的文本,并使用 data-target 属性,放置面板的类名。

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);
}
.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;
}
<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>

关于javascript - 如何在javascript中创建标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54723528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com