如何在移动单击时更改侧边栏的外观

Question

我想创建一个侧边栏，当点击时，只更改1，其余的都不见了。

例如：

这是我尝试的时候

这就是我想要的

let button = document.querySelectorAll("aside li a");
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", function() {
this.classList.toggle("is-active");
});
}

aside ul {
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
width: 190px;
left: 355px;
}
aside li a {
position: relative;
display: block;
padding: 5px 20px;
color: #145CA6;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 20px;
text-decoration: none;
top: 100px;
}
aside li a:hover,
aside li a.is-active {
color: #fff;
background-color: #145CA6;
transition: all 1s;
}

<aside>
<ul>
<li><a href="#tg">Overview</a></li>
<li><a href="#research-objective">Research</a></li>
<li><a href="#research">Interview</a></li>
<li><a href="#user-journey">User Journey</a></li>
<li><a href="#user-persona">Persona</a></li>
<li><a href="#ideation">Ideation</a></li>
<li><a href="#wireframe">Wireframe</a></li>
<li><a href="#final-design">Final Design</a></li>
<li><a href="#design-system">Design System</a></li>
</ul>
</aside>

也许除了创建toogle并将其添加到css中之外，还有其他方法？因为我对此感到困惑。

谢谢：(

Answer 1

一种解决方案是在为单击的button添加之前，从其他buttons中删除所有is-active类

let buttons = document.querySelectorAll("aside li a");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
buttons.forEach(button => button.classList.remove('is-active'));
this.classList.add("is-active");
});
}

aside ul {
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
width: 190px;
left: 355px;
}
aside li a {
position: relative;
display: block;
padding: 5px 20px;
color: #145CA6;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 20px;
text-decoration: none;
top: 100px;
}
aside li a:hover,
aside li a.is-active {
color: #fff;
background-color: #145CA6;
transition: all 1s;
}

<aside>
<ul>
<li><a href="#tg">Overview</a></li>
<li><a href="#research-objective">Research</a></li>
<li><a href="#research">Interview</a></li>
<li><a href="#user-journey">User Journey</a></li>
<li><a href="#user-persona">Persona</a></li>
<li><a href="#ideation">Ideation</a></li>
<li><a href="#wireframe">Wireframe</a></li>
<li><a href="#final-design">Final Design</a></li>
<li><a href="#design-system">Design System</a></li>
</ul>
</aside>