Javascript CSS单选切换（垂直列表）

Question

我想创建以下，但我不知道什么是最好的方式去做。

我想要一个网页上的项目的垂直列表。 每个项目都是可点击的。 当用户点击一个列表项时，我想要显示它已被选中（通过在背景中显示按钮图像，当再次单击相同的项目或单击任何其他列表项时，我想要删除该图像并如果被点击其他项目，选择图像显示该项目的后面。

有什么建议？

感谢

Answer 1

这在jQuery中尤其令人愉快。小提琴：http://jsfiddle.net/HgVmm/3/

HTML：

<ul id='items' class='selectable'> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

JS：

// For a single list to act independent of other lists: 
$('ul.selectable li').live('click', function() { 
    $(this).siblings('li.selected').removeClass('selected'); 
    $(this).toggleClass('selected'); 
}); 

// For all `selectable` lists to act together: 
$('ul.selectable li').live('click', function() { 
    $('li.selected').not(this).removeClass('selected'); 
    $(this).toggleClass('selected'); 
}); 

CSS：

ul.selectable li { cursor: pointer; } 
ul.selectable li.selected { background: red; } /* Style to taste */ 

Answer 2

Demo，有re-factored version

// catch a click on any of the <li> items 
$('li').click(function(){ 
    // store a reference to the specific <li> that 
    // was clicked. 
    var $li = $(this); 

    // toggle the class (if it's applied, it's removed. 
    // if it's removed, re-apply it) 
    $li.toggleClass('clicked'); 

    // Now, if it's applied, remove the class from any 
    // other <li> (single item clicked at a time) 
    if ($li.hasClass('clicked')){ 
     $li.siblings().removeClass('clicked'); 
    } 
}); 

沿

Answer 3

@ssdesign;我知道你接受一个答案，但可能是你可以检查这一项 http://jsfiddle.net/sandeep/HgVmm/4/

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