Javascript CSS 单选切换(垂直列表)

Question

我想创建以下内容，但不确定最好的方法是什么。

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

有什么建议吗？

谢谢

Answer 1

这在 jQuery 中尤其令人愉快。 fiddle :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 */