Question

我想要使用li元素进行列表，当我点击其中一个<li>时，然后更改li元素的背景，如果我点击其他元素而不是更改另一个li的背景，并将其他li的背景返回原始颜色。

这样的事情：

<ul>
 <li>Option1</li>
 <li>Option2</li>
</ul>

当我点击选项1突出显示其背景或放置边框时，我点击选项2然后返回第一个divs propietes并更改选项2的背景颜色。

Answer 1

试试这个：

$(function(){
$("li").click(function(){
  $("li").css("backgroundColor", "white");
  $(this).css("backgroundColor", "yellow");
});

}）;

工作demo

Answer 2

初始化表示页面加载时当前所选li的var（未选中）。向每个调用高亮更新方法的li添加一个click事件，并将自身作为参数。该方法应禁用当前所选li上的突出显示，在单击的li上启用它，并将当前选定的一个设置为单击的一个。希望很清楚！

Answer 3

如果我已经理解了你正在寻找什么，那么这样的事情应该有效：

$("li").click(function() {
    $("li").css("backgroundColor", "#ff0000");
    $(this).css("backgroundColor", "#000000");
});

这会将click事件侦听器附加到所有li元素。单击一个时，它会设置所有这些背景，然后更改所单击的背景。

Answer 4

<强> HTML

<ul>
    <li>hello</li>
    <li>hello</li>  
</ul>

<强>的Javascript

$("li").click(function () {
    $(this).css("background-color","red");
    $(this).siblings().css("background-color","white");
});

http://jsfiddle.net/ipr101/kKZhN/

Answer 5

您也可以使用无线电选项。 Javascript（Jquery方法）

$("#radio").buttonset();

HTML

<div id="radio" class='demo'>
    <input type="radio" id="radio1" name="radio" /><label for="radio1">label 1</label>
    <input type="radio" id="radio2" name="radio" /><label for="radio2">label 2</label>
</div>

Answer 6

所以你想在点击它们时对每一行进行突出显示？单击li时可以应用一个类，并在添加它之前从其他li中删除该类。

$('ul li').click(function(){
  $(this).siblings().removeClass('classname'); 
  $(this).toggleClass('classname');  
});

Answer 7

尽量避免使用内联样式。而是在你的CSS中创建一个伪类。

的CSS：

li {
background:#fff;
}
li.selected {
background:#eee;
}

JS：

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

jQuery列表，样式<li> fields </li>

7 个答案: