我用四个项目进行了侧边导航。单击某个项目时，会显示一个红色边框，表示该项目处于活动状态；再次单击该项目时，边框将消失。
然而，我想要的是一次只显示一个边框，而不是为任何单击的项目显示多个边框。
const cards = document.querySelectorAll('.main_list_item');
cards.forEach((card) => {
const num_btn = card.querySelector('.menu_header')
num_btn.addEventListener('click', () => {
if (!card.classList.contains('active')) {
card.classList.add('active');
} else {
card.classList.remove('active');
}
})
})* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body {
font-family: 'Ebrima';
background-color: #444444;
}
nav#nav_menu_query_off {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background-color: #222222;
overflow: auto;
z-index: 2;
padding: 20px 0 20px 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header {
text-transform: uppercase;
padding-bottom: 10px;
}
nav#nav_menu_query_off menu li {
color: #f0f0f0;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {
padding-top: 20px;
}
.active {
border-bottom: 1px solid red;
}
nav::-webkit-scrollbar {
display: none;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>side nav</title>
</head>
<body>
<nav id="nav_menu_query_off">
<menu id="main_menu">
<li class="main_list_item">
<div class="menu_header">menu one</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
<li class="main_list_item">
<div class="menu_header">menu two</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
<li class="main_list_item">
<div class="menu_header">menu three</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
<li class="main_list_item">
<div class="menu_header">menu four</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
</menu>
</nav>
</body>
</html>请帮我解决这个问题。
只需清除所有.main_list_item上所有以前的active类，然后再添加当前类。
const cards = document.querySelectorAll('.main_list_item');
cards.forEach((card) => {
const num_btn = card.querySelector('.menu_header')
num_btn.addEventListener('click', () => {
if (!card.classList.contains('active')) {
// Clear all borders
cards.forEach((card)=> card.classList.remove('active'))
card.classList.add('active');
} else {
card.classList.remove('active');
}
})
})* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body {
font-family: 'Ebrima';
background-color: #444444;
}
nav#nav_menu_query_off {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background-color: #222222;
overflow: auto;
z-index: 2;
padding: 20px 0 20px 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header {
text-transform: uppercase;
padding-bottom: 10px;
}
nav#nav_menu_query_off menu li {
color: #f0f0f0;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {
padding-top: 20px;
}
.active {
border-bottom: 1px solid red;
}
nav::-webkit-scrollbar {
display: none;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>side nav</title>
</head>
<body>
<nav id="nav_menu_query_off">
<menu id="main_menu">
<li class="main_list_item">
<div class="menu_header">menu one</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
<li class="main_list_item">
<div class="menu_header">menu two</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
<li class="main_list_item">
<div class="menu_header">menu three</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
<li class="main_list_item">
<div class="menu_header">menu four</div>
<div class="menu_body">
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
<menu class="sub_menu"></menu>
</div>
</li>
</menu>
</nav>
</body>
</html>