[英]How to add and remove class from list items?
我为网站设计了一个侧面导航。 如何在点击导航项目时添加一个类并将其从上一个导航项目中删除?
我在这里试过这个解决方案: https : //codepen.io/8eni/pen/MaGVrq
我也尝试过一些jQuery。
这是我的代码:
<ul class="side_menu" id="sideMenu">
<li class="list_header">
<p class="list_p">REVIEWS</p>
<ul class="sub_list">
<li class="sub_list_item" style="padding-top: 0px !important;">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-layer-group padding_right"></i> All Reviews
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-up padding_right"></i> Best Albums
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-down padding_right"></i> Worst Albums
</a>
</li>
</ul>
</li>
<li class="list_header">
<p class="list_p">GENRES</p>
<ul class="sub_list">
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Dub
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Electronica
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Grundge
</a>
</li>
</ul>
</li>
</ul>
我希望将一个类添加到用户单击的特定项目中。 单击另一个项目后,上一个项目将删除该类。
使用jQuery:
$(document).ready(function(){
$('.sub_list_item').click(function(){
$('.sub_list_item').removeClass('yourClass');
$(this).addClass('yourClass');
});
});
希望这个有效! 我们的想法是从所有导航项中删除yourClass
,然后将其添加到当前导航项中。
这是一种纯JavaScript
方式(无依赖关系)。 为了演示,我阻止了默认的链接行为。
const listItems = document.querySelectorAll('.sub_list_item'); function setActiveClass() { if (document.querySelector('.sub_list_item.active') != null) { document.querySelector('.sub_list_item.active').classList.remove('active'); } this.classList.add('active'); } listItems.forEach(item => { item.addEventListener('click', setActiveClass); }); // DEMO ONLY — REMOVE const listLinks = document.querySelectorAll('.sub_list_link'); listLinks.forEach(link => { link.addEventListener('click', e => e.preventDefault()); });
.sub_list_item.active { background-color: yellow; }
<ul class="side_menu" id="sideMenu"> <li class="list_header"> <p class="list_p">REVIEWS</p> <ul class="sub_list"> <li class="sub_list_item" style="padding-top: 0px !important;"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-layer-group padding_right"></i> All Reviews </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-thumbs-up padding_right"></i> Best Albums </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-thumbs-down padding_right"></i> Worst Albums </a> </li> </ul> </li> <li class="list_header"> <p class="list_p">GENRES</p> <ul class="sub_list"> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-music padding_right"></i> Dub </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-music padding_right"></i> Electronica </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-music padding_right"></i> Grundge </a> </li> </ul> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.