我试图通过单击其中的链接来添加或删除列表元素的活动类。
<ul>
<li id="l1" class=""><a href="javascript:;" class="btn1"> one</a></li>
<li id="l2" class=""><a href="javascript:;" class="btn2">two</a></li>
</ul>
$('.btn1').click(function() {
$( "#l1" ).addClass( "active" );
$( "#l2" ).removeClass( "active" );
window.open ('/one');
});
$('.btn2').click(function() {
$( "#l2" ).addClass( "active" );
$( "#l1" ).removeClass( "active" );
window.open ('/two');
});
我的HTML和CSS类如上所述。但是它没有按预期工作。有人知道如何解决吗?
最佳答案
$('.btn').click(function() {
$('.btn').closest('li').removeClass("active")
$(this).closest('li').addClass("active")
console.log($(this).data("url"))
})
li.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="l1" class=""><a href="javascript:;" class="btn" data-url="/one"> one</a></li>
<li id="l2" class=""><a href="javascript:;" class="btn" data-url="/two">two</a></li>
</ul>