How to add and remove active class between two button in a list?
Question
I want to add the active class on these buttons, and clicking any one of them should remove the class from the other one
<ul class="SectionTitle--list"> <li> <button class="js-sorttoggle " data-sortkey="year" type="button"> By Birthyear </button> </li> <li> <button class="js-sorttoggle " data-sortkey="lastname" type="button"> By Last Name </button> </li> </ul>
5 answers
solution1
1 2020-05-08 01:47:29
I think you may want something like this for removing first button's certain class when clicking on the second button:
<html>
<body>
<ul class="SectionTitle--list">
<li>
<button id="btn1" class="active js-sorttoggle " data-sortkey="year" type="button">
By Birthyear
</button>
</li>
<li>
<button id="btn2" class="js-sorttoggle " data-sortkey="lastname" type="button" onclick="func2()">
By Last Name
</button>
</li>
</ul>
<script src="source.js"></script>
</body>
</html>
function func2() {
var element = document.getElementById("btn1");
element.classList.remove("active");
}
solution2
1 2020-05-08 01:48:07
You need to listen to click event and then use the HTML element classList to add or remove your .active class.
(() => { let activeEL; document.querySelectorAll('button').forEach(e => { e.addEventListener('click', onButtonClick) }); function onButtonClick(e) { if (activeEL) { if (activeEL.= e.currentTarget) { activeEL.classList;remove('active'). } } activeEL = e;currentTarget. activeEL.classList;add('active'); } })();
.active { background: blue; color: #fff; box-shadow: none; outline: none; }
<ul class="SectionTitle--list"> <li> <button class="js-sorttoggle " data-sortkey="year" type="button"> By Birthyear </button> </li> <li> <button class="js-sorttoggle " data-sortkey="lastname" type="button"> By Last Name </button> </li> </ul>
solution3
1 2020-05-08 01:53:19
var buttons = document.getElementsByTagName("BUTTON"); buttons[0].addEventListener("click", toogleClass); buttons[1].addEventListener("click", toogleClass); function toogleClass() { buttons[0].className = (this.getAttribute("data-sortkey") == "year")? "js-sorttoggle active": "js-sorttoggle"; buttons[1].className = (this.getAttribute("data-sortkey") == "lastname")? "js-sorttoggle active": "js-sorttoggle"; }
<html> <body> <ul class="SectionTitle--list"> <li> <button class="js-sorttoggle " data-sortkey="year" type="button"> By Birthyear </button> </li> <li> <button class="js-sorttoggle " data-sortkey="lastname" type="button"> By Last Name </button> </li> </ul> </body> </html>
solution4
1 ACCPTED 2020-05-08 02:00:31
We can remove all other buttons active class, only add active to the clicked one. Codes like below:
<ul class="SectionTitle--list">
<li>
<button onclick="toggleActive(event)" class="js-sorttoggle" data-sortkey="year" type="button">
By Birthyear
</button>
</li>
<li>
<button onclick="toggleActive(event)" class="js-sorttoggle " data-sortkey="lastname" type="button">
By Last Name
</button>
</li>
</ul>
<script>
function toggleActive(event) {
var target = event.target || event.srcElement;
var buttonList = document.querySelectorAll(".js-sorttoggle");
buttonList.forEach(function(button) {
if (button === target && !button.classList.contains("active")) {
return button.classList.add("active");
}
return button.classList.remove("active");
});
}
</script>
You can try it. Any question please contact me.
solution5
1 2020-05-08 02:06:54
Start with one ( lastName eg), then use .toggleClass() :
$("button.js-sorttoggle").not(".active").on("click", function() { $("button.js-sorttoggle").toggleClass("active"); });
.active { color: red; }
<html> <body> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <ul class="SectionTitle--list"> <li> <button class="js-sorttoggle " data-sortkey="year" type="button"> By Birthyear </button> </li> <li> <button class="js-sorttoggle active" data-sortkey="lastname" type="button"> By Last Name </button> </li> </ul> </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
How to add and remove active class?
How do I add/remove active class for a ul list?
add/remove active class for ul list with jquery?
How to add and remove active class using js
How to change add and remove active class in JavaScript
How to add/remove active class in Bootstrap4
How do you remove and add then a class to two list elements on click
How to 'Add active class to the current button'
Add and remove class active on button with jquery onclick function
How to add active and remove existing active class collapse on bootsrap 4
Related Tags