通过单击将类添加到元素，然后将其删除到其他元素

debugcn 发表于 Dev

J.P

我工作在菜单上，我试图添加一个类时，我短声就可以了礼，但我需要删除类其他li元素，当我点击其中一个，我已经试过这个clicked.classList.remove("active");，但犯规工作时，我单击的每个元素都会获取该类，并且无法将其删除，我该怎么正确地做到这一点。

谢谢你的帮助

var menu_link = document.querySelectorAll(".menu_option");

for(i=0; i<menu_link.length; i++){
    var clicked = menu_link[i]
    clicked.addEventListener("click", function(){
        clicked.classList.remove("active");
        this.classList.add("active");
    });
}

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

html {
    font-size: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000000;
}

.container {
    max-width: 900px;
    margin: auto;
}

/*============================================================================
HEADER
===============================================================================*/

header {
    background-color: #ffda00;
    padding-top: 10px;
    padding-bottom: 10px;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header nav ul li {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
}


header .logo {
    font-size: 2rem;
}


header nav ul li a {
    font-size: 1.1rem;
}

/* active menu */

.active {
    background-color: #007bff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/[email protected]/css/themify-icons.css">
    <title>My Store</title>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <span class="logo"><i class="ti-home"></i></span>
                <ul>
                    <li class="menu_option"><a href="#">Users</a></li>
                    <li class="menu_option"><a href="#">Orders</a></li>
                    <li class="menu_option"><a href="#">Products</a></li>
                    <li class="menu_option"><a href="#">Exit</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <script src="js/script.js"></script>
</body>
</html>

zhugen

我修改了您的js代码。让我们在单击事件侦听器中进行另一个循环，以取消选中每个菜单选项的“活动”类。

var menu_link = document.querySelectorAll(".menu_option");

for(i=0; i<menu_link.length; i++){
    var clicked = menu_link[i]
    clicked.addEventListener("click", function(){
        // modified in here
        // clicked.classList.remove("active");
        menu_link = document.querySelectorAll(".menu_option");
        for (i = 0; i < menu_link.length; i++) {
            menu_link[i].classList.remove("active");
        }

        this.classList.add("active");
    });
}

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

html {
    font-size: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000000;
}

.container {
    max-width: 900px;
    margin: auto;
}

/*============================================================================
HEADER
===============================================================================*/

header {
    background-color: #ffda00;
    padding-top: 10px;
    padding-bottom: 10px;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header nav ul li {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
}


header .logo {
    font-size: 2rem;
}


header nav ul li a {
    font-size: 1.1rem;
}

/* active menu */

.active {
    background-color: #007bff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/[email protected]/css/themify-icons.css">
    <title>My Store</title>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <span class="logo"><i class="ti-home"></i></span>
                <ul>
                    <li class="menu_option"><a href="#">Users</a></li>
                    <li class="menu_option"><a href="#">Orders</a></li>
                    <li class="menu_option"><a href="#">Products</a></li>
                    <li class="menu_option"><a href="#">Exit</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <script src="js/script.js"></script>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。