在LI点击时更改类

change class on LI click

本文关键字：LI 更新时间：2023-09-26

我需要定期将一个.selected类分配给我单击的元素，并删除之前分配给单击的元素的任何其他类，这样我就可以更改CSS类。也许这个代码：

$(this).click(function(){
  $(this).addClass('selected');
});

工作，但如果我点击任何其他李会发生什么？有人帮我做这项工作吗？

编辑：好的，看看这个代码：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

默认情况下，没有任何类，但我点击项目2，然后HTML应该在这个上转换：

<ul>
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
</ul>

但是，如果我再次点击第3项，那么HTML应该在这一项上转换：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="selected">Item 3</li>
</ul>

这就是我尝试做的

我建议：

$(selector).click(function(){
  $('.selected').removeClass('selected');
  $(this).addClass('selected');
});

关于moonwave99留下的注释（如下），如果您只想从同一parent元素中包含的元素中删除selected类名：

$(selector).click(function(){
  var that = $(this);
  that.parent().find('.selected').removeClass('selected');
  that.addClass('selected');
});

尽管值得记住的是，您正在单击哪个元素，以及父元素将是什么，例如，单击以下HTML中的a：

<ul>
    <li><a href="#">link text</a></li>
</ul>

将在li中查找其他.selected元素，因此您应该使用：

$(selector).click(function(){
  var that = $(this);
  that.closest('ul').find('.selected').removeClass('selected');
  that.addClass('selected');
});

首先从ul内的所有li中删除所选类，然后将类应用于单击的li。

$('ul li').click(function(){
 $('ul li').removeClass('selected');
  $(this).addClass('selected');
});

在我的旅行中，我发现在使用引导程序时，不可能添加'active'的class来列出中的项目。所以，如果你正在阅读这篇文章（就像我一样），想知道为什么当类名是"活动的"时，这不起作用，你需要选择其他东西。