[英]How to change add and remove active class in JavaScript
我有導航欄,我想在其中添加活動類並將其從以前的單擊列表中刪除,我認為這是基本的事情,但是我是javascript語言的新手,所以我不知道解決方案。 我有可以工作的代碼,但最后一個和第一個列表沒有刪除。
HTML代碼
<div id="icon-layout">
<ul>
<li>CLOTHING</li>
<li>BAGS</li>
<li>SHOES</li>
<li>ACCESSORIES</li>
<li>BEAUTY</li>
<li>ABOUT US</li>
<li>SERVICE</li>
</ul>
</div>
CSS
#icon-layout .active{
background-color: #FF4136;
color: white;
}
JAVASCRIPT
var activeclass = document.querySelectorAll('#icon-layout li');
for (var i = 0; i < activeclass.length; i++) {
activeclass[i].addEventListener('click', activateClass);
}
function activateClass(e) {
var previous = e.target.previousElementSibling;
var next = e.target.nextElementSibling;
e.target.classList.add('active');
previous.classList.remove('active');
next.classList.remove('active');
}
var activeclass = document.querySelectorAll('#icon-layout li');
for (var i = 0; i < activeclass.length; i++) {
activeclass[i].addEventListener('click', activateClass);
}
function activateClass(e) {
for (var i = 0; i < activeclass.length; i++) {
activeclass[i].classList.remove('active');
}
e.target.classList.add('active');
}
您可以遍歷所有元素並刪除類,然后再添加一個
嘗試使用JQuery,因為它肯定會使您的任務更輕松:
$('#icon-layout li').on('click', function() {
$('.icon-layout li.active').removeClass('active');
$(this).addClass('active');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.