stackoom
  简体   繁体   中英

add class to an element by clicking and remove it to the other elements By JavaScript

 原文  2020-03-19 04:31:16  9   3    javascript

Question

I am working on a menu, and I am trying to add a class to the li when I clik on it, but I need to remove the class to the other li elements when I click on one of them, I have tried this clicked.classList.remove("active"); but doesnt work, every element I click on get the class and is not possible to remove it, How coud I do this correctly.

Thanks for your help

 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/themify-icons@0.1.2/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>

3 answers

solution1
 1  2020-03-19 04:34:24

I hope this is what you're looking for? if so you can tweak existing code based on this.

you can replace button with li that won't be an issue. 

 var btnContainer = document.getElementById("myDIV"); // Get all buttons with class="btn" inside the container var btns = btnContainer.getElementsByClassName("btn"); // Loop through the buttons and add the active class to the current/clicked button for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); }
 /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; } /* Style the active class (and buttons on mouse-over) */ .active, .btn:hover { background-color: #666; color: white; }
 <div id="myDIV"> <button class="btn">1</button> <button class="btn active">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> </div>

solution2
 1  2020-03-19 04:46:50

I think this is what you want: 

 var menu_link = document.querySelectorAll(".menu_option"); for(i=0; i<menu_link.length; i++){ var clicked = menu_link[i] clicked.addEventListener("click", function(){ var active = document.querySelector('.menu_option.active'); if(active) { active.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/themify-icons@0.1.2/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>

solution3
 1 ACCPTED  2020-03-19 04:57:58

I modified your js code a bit. Let's do another loop in your click event listener, to uncheck the "active" class to every menu option. 

 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/themify-icons@0.1.2/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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Add/Remove class when clicking on element with pure JavaScript clicking an element to remove other element class Javascript Help: Clicking an element affects that element AND other elements On click add class to element with certain class and remove it from all other elements with same class Use vanilla javascript to add / remove class to a different element after clicking on another one JavaScript: Add/remove a single class on multiple elements Add one class and remove other in javascript Javascript - add class to element, remove from siblings add/remove a class from an element with getElementsByClassName in Javascript How to remove class by clicking element
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM