如何使用ID而不是类激活图标，以及如何自动删除和添加图标

Question

我想使用ID而不是类，因为我使用的是图标，我已经修复了如何激活图标，但没有修复它将如何自动更改为其他图标。我是Javascript的新手，但我仍然没有足够的知识来做它。请帮助我，并提前感谢`

let ul = document.querySelector('ul');
let i = document.querySelectorAll('i');
i.forEach(el => {
el.addEventListener('click', function (){
li.querySelector("active").classList.remove('active');

el.classList.add('active');
});
});

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
:root {
font-size: 16px;
font-family: 'Open Sans';

}
body {
margin: 0;
padding: 0;
background-color: #23232e;
}
body::-webkit-scrollbar {
width: 0.25rem;

}
body::-webkit-scrollbar-thumb {

background: #43434f;
}
main {
color: white;
margin-left: 6rem;
padding: 1rem;

}
.navbar {
position: fixed;
background-color:  var( --bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 65;
position: relative;


}
.nav-item a{
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -153px;
transition: 0.3s ease;
}
.nav-item a:hover{
margin-left: 30;
color: #ffffff;
font-weight: bold;
border-radius: 20px;
box-shadow:  15px 5px 5px -5px rgba(0, 3, 7, 0.8);

}
ul li i#active {
filter: grayscale(0) opacity(1);
}
li i{
color: white;
font-size: 35px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.3s ease;

}
Li i:hover{
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.1s ease;

}
.logo h1{
font-family: Rustico;
font-size: 55px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(7, 57, 255), rgb(255, 10, 10));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover{
font-size: 60px;
transition: 0.60s ease-in-out;
cursor: pointer;
transform: rotateY(360deg);

}
.logo p{
color: #ececec;
position: relative;
bottom: 55px;
font-family: APEX;
text-align: center;
}
hr{
filter: grayscale(100%) opacity(0.1);
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper .icon{
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}
.wrapper .icon span{
color:  #131313;
padding: 0;
margin: 0;
display: block;
height: 50px;
width: 50px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
filter: grayscale(100%) opacity(0.1);
}
.wrapper .icon span i{
line-height: 50px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip{
position: absolute;
left: -80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: 0.4s ease-in-out;

}
.wrapper .icon:hover .tooltip{
left: 80px;
top: 14px;
opacity: 1;
transition: 0.4s ease-in-out;

}
.wrapper .icon:hover span{
color: #fff;
filter: opacity(1);

}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before{
background: #3B5999;
}
.wrapper .twitter:hover span,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip:before{
background: #46C1F6;
}
.wrapper .instagram:hover span,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip:before{
background: #e1306c;
}
.wrapper .github:hover span,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip:before{
background: #333;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before{
background: #DE463B;
}
/* Large screens */
@media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
}

}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="CSS/Style.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet"/>
<script src="https://kit.fontawesome.com/5a479f40ed.js" crossorigin="anonymous"></script>
<script src="JS/Main.js"></script>
</head>
<body>
<nav class="navbar">
<head>
<div class="logo">
<h1>AR</h1>
<p>WEBSITE</p>

</div>
</head>
<ul class="navbar-nav">
<li class="nav-item">
<a href="">About<i class="far fa-user" id="active"></i></a>
</li>
<li class="nav-item">
<a href="">Resume<i class="far fa-file"></i></a>
</li>
<li class="nav-item">
<a href="">Portfolio<i class="fas fa-guitar"></i></a>
</li>
<li class="nav-item">
<a href="">Contact<i class="far fa-address-card"></i></a>

</li>

Answer 1

您需要使用setAttribute()方法来分配id。以及removeAttribute()分别去除id。

为了便于理解，我将显示我在解决方案中使用的部分代码：

Array.from(i).forEach(el => el.removeAttribute('id'));
this.setAttribute('id', 'active');

window.onload = function() {
let ul = document.querySelector('ul');
let i = document.querySelectorAll('i');
i.forEach(el => {
el.addEventListener('click', function (event){
event.preventDefault();
Array.from(i).forEach(el => el.removeAttribute('id'));
this.setAttribute('id', 'active');
});
});
}

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
:root {
font-size: 16px;
font-family: 'Open Sans';

}
body {
margin: 0;
padding: 0;
background-color: #23232e;
}
body::-webkit-scrollbar {
width: 0.25rem;

}
body::-webkit-scrollbar-thumb {

background: #43434f;
}
main {
color: white;
margin-left: 6rem;
padding: 1rem;

}
.navbar {
position: fixed;
background-color:  var( --bg-primary);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
flex-direction: column;
align-items: center;
height: 100%;
bottom: 65;
position: relative;


}
.nav-item a{
display: block;
text-decoration: none;
background: #23232e;
color: #ffffff;
padding: 10;
margin: 2px 0;
width: 200px;
display: flex;
align-items: center;
margin-left: -153px;
transition: 0.3s ease;
}
.nav-item a:hover{
margin-left: 30;
color: #ffffff;
font-weight: bold;
border-radius: 20px;
box-shadow:  15px 5px 5px -5px rgba(0, 3, 7, 0.8);

}
ul li i#active {
filter: grayscale(0) opacity(1);
}
li i{
color: white;
font-size: 35px;
padding: 0;
filter: grayscale(100%) opacity(0.1);
width: 100%;
text-align: right;
transition: 0.3s ease;

}
Li i:hover{
color: white;
filter: grayscale(0) opacity(1);
text-align: right;
transition: 0.1s ease;

}
.logo h1{
font-family: Rustico;
font-size: 55px;
margin: 0;
padding: 0;
background: -webkit-linear-gradient(rgb(7, 57, 255), rgb(255, 10, 10));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.logo h1:hover{
font-size: 60px;
transition: 0.60s ease-in-out;
cursor: pointer;
transform: rotateY(360deg);

}
.logo p{
color: #ececec;
position: relative;
bottom: 55px;
font-family: APEX;
text-align: center;
}
hr{
filter: grayscale(100%) opacity(0.1);
border: 2px solid white;
padding: 0 5px;
margin: 0;
}
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper .icon{
padding: 10px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}
.wrapper .icon span{
color:  #131313;
padding: 0;
margin: 0;
display: block;
height: 50px;
width: 50px;
background: #fff;
border-radius: 50%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
filter: grayscale(100%) opacity(0.1);
}
.wrapper .icon span i{
line-height: 50px;
font-size: 25px;
text-align: center;
}
.wrapper .icon .tooltip{
position: absolute;
left: -80px;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: 0.4s ease-in-out;

}
.wrapper .icon:hover .tooltip{
left: 80px;
top: 14px;
opacity: 1;
transition: 0.4s ease-in-out;

}
.wrapper .icon:hover span{
color: #fff;
filter: opacity(1);

}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before{
background: #3B5999;
}
.wrapper .twitter:hover span,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip:before{
background: #46C1F6;
}
.wrapper .instagram:hover span,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip:before{
background: #e1306c;
}
.wrapper .github:hover span,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip:before{
background: #333;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before{
background: #DE463B;
}
/* Large screens */
@media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
}

}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="CSS/Style.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet"/>
<script src="https://kit.fontawesome.com/5a479f40ed.js" crossorigin="anonymous"></script>
<script src="JS/Main.js"></script>
</head>
<body>
<nav class="navbar">
<head>
<div class="logo">
<h1>AR</h1>
<p>WEBSITE</p>

</div>
</head>
<ul class="navbar-nav">
<li class="nav-item">
<a href="">About<i class="far fa-user" id="active"></i></a>
</li>
<li class="nav-item">
<a href="">Resume<i class="far fa-file"></i></a>
</li>
<li class="nav-item">
<a href="">Portfolio<i class="fas fa-guitar"></i></a>
</li>
<li class="nav-item">
<a href="">Contact<i class="far fa-address-card"></i></a>

</li>

Answer 2

如果我完全理解您的疑问，那么您应该只在querySelector方法内部添加"&"；。可能类似于：

i.forEach(el => {
el.addEventListener('click', function (){
li.querySelector("#active").classList.removeAttribute('id');

el.id = 'newid';
});

})；