jQuery

Question

我需要一个简单的脚本。我有清单：

<ul>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
</ul>

通过单击 <li>，我需要向单击的元素添加 class 活动。单击外部删除 class 活动。单击另一个 <li> 元素时，从第一次单击的元素中删除 class 活动，并将 class 活动添加到单击的元素。

感谢

Answer 1

您只需找到 <li> 元素并为其设置事件即可。在我看来，您的 <li> 元素应该有一个 class，这样您就不会找到其他不需要的元素。

$('li').on('click', function(elem)  {

    $('li').each(function (elem) { 
        $(this).removeClass('active') 
    });
    $(this).addClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
</ul>

Answer 2

这是非常非常基础的东西，你应该先去学习 jQuery。你可以这样 add/remove class

$('li').click(function(event){
    $('.active').removeClass('active');
    $(this).addClass('active');
    event.stopPropagation();
});
$(document).click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>test</li>
  <li>test2</li>
  <li>teste1</li>
</ul>

看看https://learn.jquery.com/

jQuery - 如何将 class 添加到容器并在外部单击时移除

jQuery - how to add class to container and remove on click outside

html

onclick