堆棧內存溢出
  簡體   English   中英

如何在純 JavaScript 中向元素添加和刪除活動類

[英]How can I add and remove an active class to an element in pure JavaScript

 原文  2016-08-17 07:06:11  0   9    javascript/ html/ css

問題描述

我正在嘗試制作一個導航菜單，當涉及到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>

這是我的Codepen

9 個解決方案

解決方案1
 30 已采納  2016-08-17 07:13:17

使用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

取而代之的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

編輯

您可以使用 document.queryselector 選擇具有active類的元素，而不是遍歷整個集合。 還要為 ul 提供一個id ，以便您可以定位特定元素

 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>

解決方案2
 7  2016-08-17 07:09:14

您可以使用classList方法add 、 remove或toggle 。

首先從前一個中刪除類名：

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

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

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

解決方案3
 3  2018-05-30 13:57:57

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

    });

順便說一句：一個很好的解決方案在這里： https : //gomakethings.com/getting-all-sibling-elements-when-a-link-or-button-is-clicked-with-vanilla-js/

解決方案4
 1  2016-08-17 07:18:03

您可以使用“純”JavaScript Element.classList在 DOM 元素中添加和刪除類。

add ：添加指定的類值。 如果這些類已經存在於元素的屬性中，那么它們將被忽略。

remove ：刪除指定的類值。

使用Document.querySelectorAll()返回文檔中與指定的 CSS 選擇器組匹配的元素。

更多信息請訪問：

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

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

關於您的代碼，當用戶使用以下代碼單擊元素時，您可以將其標記為活動元素： 

 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>

解決方案5
 1  2016-08-17 07:19:48

你可以在純 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>

解決方案6
 1  2016-08-17 07:21:18

我個人堅持使用document.querySelector方法。 querySelector 接受類似 CSS 的查詢，我們將使用它來查找頁面上的活動類。 如果存在（ if語句），則將其刪除並在目標上應用新類。

請注意，使用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'); }

解決方案7
 0  2016-08-17 07:43:20

JS

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

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

為了更好的瀏覽器支持：

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(" ");
});

解決方案8
 0  2016-08-17 08:31:36

 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>

解決方案9
 -1  2016-08-17 07:12:08

下面應該會有所幫助。

//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";

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在純javascript中將類添加到隨機元素 使用純 JavaScript 單擊元素時添加/刪除 class 如何在JavaScript中更改添加和刪除活動類 如何使用 javascript 添加元素 class？ 如果元素單擊vue組件，如何添加活動類？ 如何選擇元素，將其包含在div中，然后使用純JavaScript為其添加類？ 如何使用JavaScript代碼在活動Li上添加類 添加/刪除活動 class JavaScript 如何在純 JavaScript 中切換元素的類？ 如何從特定元素添加和刪除 class？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM