如何在纯 JavaScript 中向元素添加和删除活动类

Question

提问by Venu Madhav

I am trying to make a navigation menu I did all the HTMLand CSSwhen come to javascriptI 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

我正在尝试制作一个导航菜单，当涉及到javascript时，我完成了所有的HTML和CSS我在中间被击中了我能够向元素添加一个类，但我无法删除该类的剩余元素。请帮我解决一下这个。这是我的代码

<!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

这是我的Codepen

Answer 1

回答by brk

Use document.querySelectorAllto find the element which currently have the activeclass, then you can remove that class.

使用document.querySelectorAll发现其目前拥有的元素active类，那么您可以删除类。

function myFunction(e) {
  var elems = document.querySelectorAll(".active");
  [].forEach.call(elems, function(el) {
    el.classList.remove("active");
  });
  e.target.className = "active";
}

JSFIDDLE

Instead of document.querySelectorAllyou can also use document.querySelector

而不是document.querySelectorAll你也可以使用document.querySelector

 function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

JSFIDDLE 2

Edit

编辑

Instead of iterating through the entire collection you can select the element which have a class activeusing document.queryselector. Also provide an idto the ul so that you can target the specific element

您可以active使用 document.queryselector选择具有类的元素，而不是遍历整个集合。还要向idul提供，以便您可以定位特定元素

function myFunction(e) {
  if (document.querySelector('#navList a.active') !== null) {
    document.querySelector('#navList a.active').classList.remove('active');
  }
  e.target.className = "active";
}

<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;
}

<title>Navigation class Toggling</title>

<header>
  <nav>
    <ul onclick="myFunction(event)" id='navList'>
      <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>

Answer 2

回答by Leo

You could use classListmethods to add, remove, or toggle.

你可以使用classList方法add，remove或toggle。

First remove class name from previous one:

首先从前一个中删除类名：

// assuming there's only one with such class name
// otherwise you need querySelectorAll and a loop
document.querySelector('.active').classList.remove('active')

Then add it to the new element:

然后将其添加到新元素中：

e.target.classList.add('active')

Answer 3

回答by Mary Pieroszkiewicz

HTML

<div class="container">
 <nav>
  <ul class="nav">
    <li class="nav__item"><a class="nav__link active" href="#">Home</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 1</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 2</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 3</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 4</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 5</a></li>
  </ul>
 </nav>
</div>

CSS

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    *::before, *::after {
        box-sizing: border-box;
    }

    .container {
      width: 100%;
      max-width: 1024px;
      display: block;
      margin: 30px auto;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }

    .nav__item {
      padding: 1rem;
    }

    .nav__link {
      display: block;
      padding: .3125rem 1.5rem;
      text-transform: uppercase;
    }

    .nav__link.active  {
      border: 1px solid #ff4b4c;
      color: #ff4b4c;
    }

JS

    document.addEventListener('DOMContentLoaded', function() {

      const selector = '.nav__link';
      const elems = Array.from(document.querySelectorAll(selector));
      const navigation = document.querySelector('nav');

      function makeActive(evt) {
        const target = evt.target;

         if (!target || !target.matches(selector)) {
           return;
         }

        elems.forEach(elem => elem.classList.remove('active'));
        evt.target.classList.add('active');
      };

      navigation.addEventListener('mousedown', makeActive);

    });

BTW: A great solution is here: https://gomakethings.com/getting-all-sibling-elements-when-a-link-or-button-is-clicked-with-vanilla-js/

顺便说一句：一个很好的解决方案在这里：https: //gomakethings.com/getting-all-sibling-elements-when-a-link-or-button-is-clicked-with-vanilla-js/

Answer 4

回答by GibboK

You can use "pure" JavaScript Element.classListto add and remove a class from your DOM element.

您可以使用“纯”JavaScriptElement.classList在 DOM 元素中添加和删除类。

add: Add specified class values. If these classes already exist in attribute of the element, then they are ignored.

add: 添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。

remove: Remove specified class values.

remove: 删除指定的类值。

Use Document.querySelectorAll()to returnsa elements within the document that match the specified group of CSS selectors.

使用Document.querySelectorAll()匹配CSS选择器的指定组，该文件中returnsa元素。

More info at:

更多信息请访问：

https://developer.mozilla.org/en/docs/Web/API/Element/classList

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Regarding your code, you can mark as active your element when User click on it using the following code:

关于您的代码，当用户使用以下代码单击元素时，您可以将其标记为活动元素：

window.myFunction = function(event) {
  // reset all menu items
  document.querySelectorAll('ul li a.active').forEach(function(item) {
  item.classList.remove('active');
})
  // mark as active selected menu item
  event.target.classList.add("active");
};

* {
  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;
}

.active {
  ackground-color: red;
}

<header>
  <nav>
    <ul onclick="window.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>

Answer 5

回答by Dinesh Shah

you can do like this in pure javascript

你可以在纯 javascript 中这样做

   function myFunction(e,ev) {
      for(var i=0;i<e.children.length;i++)
        {
         e.children[i].childNodes[0].className = "";
          
        }
        ev.target.className = "active"; 
         
        }

<!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(this,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">
     
    </script>
    </body>
    </html>

Answer 6

回答by roberrrt-s

I'd personally stick with the document.querySelectormethod. querySelector accepts a CSS like query, which we will use to find an active class on the page. If it exists (the ifstatement), remove it and apply the new class on the target.

我个人会坚持这种document.querySelector方法。querySelector 接受类似 CSS 的查询，我们将使用它来查找页面上的活动类。如果存在（if语句），则将其删除并在目标上应用新类。

Please be aware that using className = ""will result in all classes being removed. It would be more neat to use classListfor everything.

请注意，使用className = ""将导致所有类被删除。classList用于所有东西会更整洁。

function myFunction(e) {
    var el = document.querySelector('.active');
  
    // Check if the element exists to avoid a null syntax error on the removal
    if(el) {
      el.classList.remove('active');
    }
  
    e.target.classList.add('active');
}

Answer 7

回答by dzej.5

JS

var targets = document.querySelectorAll('.some-class');

targets.onclick = function(evt) {
    evt.classList.toggle('{your-class}');
};

For better browser support:

为了更好的浏览器支持：

targets.onclick = function(evt) {
    var el = evt.target;
    var classes = el.className.split(" ");
    var classIndex = classes.indexOf('{your-class}');

    if (classIndex >= 0) {
        classes.splice(1, classIndex);
    } else {
        classes.push('{your-clas}');
    }

    el.className = classes.join(" ");
});

Answer 8

回答by satwick

window.myFunction = function(event) {
  var elms = document.querySelectorAll('ul li a');
  // reset all you menu items
  for (var i = 0, len = elms.length; i < len; i++) {
    elms[i].classList.remove('active');
  }
  // mark as active clicked menu item
  event.target.classList.add("active");
};

* {
  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: pink;
  color: #fff;
}

a.active {
  background-color: blue;
}

.active {
  ackground-color: red;
}

<header>
  <nav>
    <ul onclick="window.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>

Answer 9

回答by IronAces

Below should help.

下面应该会有所帮助。

//Remove all classes by ID
document.getElementById("elementIdHere").className = "";
//If you wish to keep some classes on the element, use below
document.getElementById("elementIdHere").className = "keepClass";

如何在纯 JavaScript 中向元素添加和删除活动类

提问by Venu Madhav

回答by brk

回答by Leo

回答by Mary Pieroszkiewicz

回答by GibboK

回答by Dinesh Shah

回答by roberrrt-s

回答by dzej.5

回答by satwick

回答by IronAces

相关推荐

最近更新

标签

如何在纯 JavaScript 中向元素添加和删除活动类

提问by Venu Madhav

回答by brk

回答by Leo

回答by Mary Pieroszkiewicz

回答by GibboK

回答by Dinesh Shah

回答by roberrrt-s

回答by dzej.5

回答by satwick

回答by IronAces

相关推荐

Javascript Chrome 扩展：让它在每个页面加载时运行

Javascript 类型错误：未定义不是构造函数

Javascript 如何使用 jQuery 解码 UTF8 字符？

Javascript 刷新页面后保留输入值

相关推荐

最近更新

标签