我试图通过单击其中的链接来添加或删除列表元素的活动类。

<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>

08-18 03:38
查看更多