我如何在纯JavaScript中为活动类添加和删除元素 [英] How can I add and remove an active class to an element in pure JavaScript
问题描述
我试图制作一个导航菜单，当我来到 javascript 时，我完成了所有 HTML 和 CSS 我能够向元素添加一个类，但是我无法删除剩余的类元素。请帮助我。
这里是我的代码
<！DOCTYPE html>
< html>
< head>
< title>导航类切换< /标题>
< style type =text / css>
* {
margin：0;
padding：0;
box-sizing：border-box;
}
标题{
width：100％;
height：auto;
max-width：600px;
margin：0 auto;
}
nav {
width：100％;
height：40px;
background-color：cornflowerblue;
}
ul {
list-style-type：none;
}
li {
display：inline-block;
}
a {
text-decoration：none;
padding：8px 15px;
display：block;
text-transform：capitalize;
background-color：darkgray;
颜色：#fff;
}
a.active {
background-color：cornflowerblue;
}
< / style>
< / head>
< body>
< header>
< nav>
< ul onclick =myFunction（event）>
< li>< a href =＃>主页< / a>< / li>
< li>< a href =＃>关于< / a>< / li>
< li>< a href =＃>服务< / a>< / li>
< li>< a href =＃>个人资料< / a>< / li>
< li>< a href =＃>投资组合< / a>< / li>
< li>< a href =＃>联络人< / a>< / li>
< / ul>
< / nav>
< / header>
< script type =text / javascript>
函数myFunction（e）{
e.target.className =active;
}
< / script>
< / body>
< / html>
这里是我的 Codepen 使用 document.querySelectorAll 来查找当前具有活动类的元素，那么您可以移除该类。
函数myFunction（e）{
var elems = document.querySelectorAll（。active）;
[] .forEach.call（elems，function（el）{
el.classList.remove（active）;
}）;
e.target.className =active;
}
而不是 document.querySelectorAll 您也可以使用 document.querySelector
函数myFunction（e）{
var elems = document.querySelector（。active）;
if（elems！== null）{
elems.classList.remove（active）;
}
e.target.className =active;
}
I am trying to make a navigation menu I did all the HTML and CSS when come to javascript I am struck in the middle I am able to add a class to the element, but I am not able to remove the class remaining elements. Please help me with this.
here is my code
<!DOCTYPE html>
<html>
<head>
<title>Navigation class Toggling</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto;
}
nav {
width: 100%;
height: 40px;
background-color: cornflowerblue;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
padding: 8px 15px;
display: block;
text-transform: capitalize;
background-color: darkgray;
color: #fff;
}
a.active {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<header>
<nav>
<ul onclick="myFunction(event)">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">service</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<script type="text/javascript">
function myFunction(e) {
e.target.className = "active";
}
</script>
</body>
</html>
and here is my Codepen
Use document.querySelectorAll to find the element which currently have the active class, then you can remove that class.
function myFunction(e) {
var elems = document.querySelectorAll(".active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
e.target.className = "active";
}
Instead of document.querySelectorAll you can also use document.querySelector
function myFunction(e) {
var elems = document.querySelector(".active");
if(elems !==null){
elems.classList.remove("active");
}
e.target.className = "active";
}
这篇关于我如何在纯JavaScript中为活动类添加和删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
