javascript - 如何在javascript中创建标签?
问题描述
我一直在尝试在 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
将应用于面板相关选项卡的类。
最后,您不应使用选项卡文本作为相应面板的类名。当标签文本中有多个单词时,这将是一个问题。我所做的是使用选项卡的数据属性来指定面板的相关类并将所有面板放在一个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>
推荐阅读
- wordpress - 使用 cPanel 将 cloudflare IP 地址列入白名单
- visual-studio - Xamarin Forms Android 应用程序无一例外地退出
- python - 有理数测试得到警告 '11/12 != 11/12'
- azure-devops - 如何访问 Azure 脚本中的变量 btw Dev Ops Pipeline 中的 Powershell
- django - django - 如何在详细视图中创建表单
- sql - 我可以在 MariaDB 中撤消最后几笔交易,或者恢复到昨天吗?
- python - 为什么更新查询的第一次迭代运行很快,然后后续迭代显着减慢?
- mysql - MySQL 上 Rails 的 `schema_migrations` 的结构是什么?
- javascript - 在 reactjs 中映射时更新输入
- javascript - 内容内容显示为 json 对象,但无法获取值