HTML <ul> |将特定 <li> 颜色 onclick 和同一 <ul> 中的其他 <li> 更改为默认颜色答案

【问题标题】：HTML <ul> | Change particular <li> color onclick and other <li> in the same <ul> to default colorHTML <ul> |将特定 <li> 颜色 onclick 和同一 <ul> 中的其他 <li> 更改为默认颜色
【发布时间】：2014-10-11 17:52:35
【问题描述】：

我想要 5 个列表，当其中任何一个被点击时，它会变为绿色并且如果其中任何一个为绿色，则将其他列表变为黑色。

这是我的清单：

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>

我已经编写了 jquery。但是，它并不简洁，因为我必须选择$('#menu li:first-child').. and $('#menu li:nth-child(2 to 5)')..

请查看演示并告诉我完成此操作的最简单方法

演示：

http://jsfiddle.net/t7L6d7b4/

【问题讨论】：

标签： jquery css

【解决方案1】：

你的做法：

var $li = $('#menu li').click(function() {
    $li.removeClass('selected');
    $(this).addClass('selected');
});

使用此 CSS 用于选定项目：

li.selected {
    color: green;
}

永远不要对这些事情使用css 方法，这是非常突兀的方法，当你想改变样式时需要你修改 JS 代码。如果明天您决定为选定的项目添加背景图像，如果您采用.css 方法，您需要做什么？您应该为此使用类，在这种情况下，您编写一次 JS 并忘记这一点。样式用于 CSS，UI 逻辑用于 JS。

这是一个演示：

var $li = $('#menu li').click(function() {
    $li.removeClass('selected');
    $(this).addClass('selected');
});

li.selected {
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>

【讨论】：

感谢您的智慧之言。我一定会牢记这一点，将样式的 CSS 和 UI 逻辑的 JS 分开

【解决方案2】：

你可以这样做

$('li').click(function(){
    $('li').css('color','black');
    $(this).css('color', 'green');
});

DEMO上面很简单，但是你可以创建类并使用addClass/removeClass添加/删除它。

【讨论】：

我更喜欢使用addClass/removeClass 但这可以+1
@Paulie_D 这也是一个很好的解决方案！谢谢
不应该$('li').css('color','black'); 只是$(this).css('color','black');？甚至使用链，例如$(this).css('color', 'green').css('color', 'black');

【解决方案3】：

一个解决方案是这样的：

$("ul > li").on("click", function(){
    $("ul li").css("color", "black");
    $(this).css("color", "green");   
});

li{
    list-style:none;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>

【讨论】：

【解决方案4】：

这是不使用任何库或框架的代码。您可以使用 javascript 来实现这一点。

<div>
    <ul>
        <li class="active">one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>

脚本在这里....

function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

css 在这里....

li.active {
    color: green;
}

【讨论】：

【解决方案5】：

你也可以用 CSS 做到这一点！像这样。行为 - 点击它会显示绿色，然后它会变回黑色。

li:active{
    color:green;
}

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
</div>

【讨论】：

:active 伪类与点击不同。这是一个 mousedown 唯一的事件，而不是持久的。
我同意，我已经更新了我的帖子，以防万一，OP 可能对这个解决方案感兴趣，我发布了这个。

【解决方案6】：

它适用于我的 jquery 版本 2.1.1，请试试这个

$(document).on('click', '#menu li', function(){
   $('.#menu li').removeClass('selected');
   $(this).addClass('selected');
});

并将其添加到 CSS 文件中。

#menu li.selected {
   background-color: rgb(2, 95, 191);
}

【讨论】：