Question

我的<ul>元素包含一些li元素：

<ul id="ul">
  <li id="li1"></li>
  <li id="li2"></li>
  <li id="li3"></li>
</ul>

我想：

点击它时，将“选定”类添加到<li>元素
清除所有<li>元素中除<li>之外的所有“已选择”类属性

问题：

我该怎么做？

Answer 1

这很简单（ FIDDLE ）：

<ul id="ul">
  <li>Item 1</li> <!-- id is unnecessary here -->
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script type="text/javascript">
    $('#ul>li').click(function() {
        $(this).addClass('selected'); // set "selected" class to clicked item
        $(this).siblings().removeClass('selected'); // remove "selected" class from other li's
    });
</script>

Answer 2

这是jsFiddle

<强> CSS

  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }

<强> HTML

  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>

<强> JS

    $("p").click(function () {
    $(".highlight").removeClass("highlight")
      $(this).toggleClass("highlight");
    });

Answer 3

只是一个样本可以帮助您。使用jQuery检查此fiddle示例。对于纯JS版本（没有jQuery）click here。

以下是您需要做的事情。

创建一个CSS类（比如selected）并将规则添加到它（如下所示）。

<强> CSS

.selected{
    background-color: black;
    color: white;
}

使用jQuery，为click元素创建li事件处理程序。
每当点击removeClass()元素时，使用selected方法从所有元素中删除li类。然后使用addClass()方法仅将selected类添加到已被点击的li元素中。

<强> JS

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

Answer 4

可能的解决方案：

$(document).ready(function (e) {
    $("#ul li").click(function () {
        $("#ul").children().removeClass("select");
        $(this).addClass("select")
    })
});

管理<li>选定状态</li>

4 个答案: