如何在列表中的两个按钮之间添加和删除活动 class？
[英]How to add and remove active class between two button in a list?
问题描述
I want to add the active class on these buttons, and clicking any one of them should remove the class from the other one
我想在这些按钮上添加活动的 class，然后单击其中任何一个按钮都应该从另一个按钮中删除 class
<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 个解决方案
解决方案1
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:我想你可能想要这样的东西来删除第一个按钮的某些 class 单击第二个按钮时：
<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");
}
解决方案2
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.您需要监听click事件，然后使用HTML 元素 classList添加或删除您的.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>
解决方案3
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>
解决方案4
1 已采纳 2020-05-08 02:00:31
We can remove all other buttons active class, only add active to the clicked one.我们可以删除所有其他active的按钮 class，只将active添加到单击的那个。 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.有任何问题请联系我。
解决方案5
1 2020-05-08 02:06:54
Start with one ( lastName eg), then use .toggleClass() :从一个开始（例如lastName ），然后使用.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何添加和删除活动类？ - How to add and remove active class?
如何为ul列表添加/删除活动课程？ - How do I add/remove active class for a ul list?
使用 jquery 添加/删除 ul 列表的活动类？ - add/remove active class for ul list with jquery?
如何使用js添加和删除活动类 - How to add and remove active class using js
如何在JavaScript中更改添加和删除活动类 - How to change add and remove active class in JavaScript
如何在 Bootstrap4 中添加/删除活动类 - 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'
使用jquery onclick函数添加和删除按钮上的类 - Add and remove class active on button with jquery onclick function
如何在bootsrap 4上添加活动和删除现有活动类崩溃 - How to add active and remove existing active class collapse on bootsrap 4
相关标签