Question

我希望有5个列表，比如当点击其中任何一个时，它会变为绿色和如果其中任何一个为绿色，则将其他列表变为黑色。

这是我的清单：

list

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

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

以下是演示：

＆＃13;

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

＆＃13;

li.selected {
    color: green;
}

＆＃13;

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

＆＃13;

Answer 2

你可以做到

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

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

Answer 3

一个解决方案就是：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

＆＃13;

li:active{
    color:green;
}

＆＃13;

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

＆＃13;

Answer 5

它适用于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);
}

Answer 6

这是不使用任何库或框架的代码。您可以使用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;
}

HTML <ul> |将特定的<li>颜色onclick和其他</li> <li>更改为相同的<ul>到默认颜色</ul> </li> </ul>

6 个答案: