javascript - 如何切换组列表中突出显示的选定项目

Question

我在使用 Bootstrap 时有这个:

    <ul class="list-group">
        <li  class="list-group-item active">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>

顶行被选中。

我只想向用户显示 1 个选定的行。

通过使用 Javascript 向 Click-Event 添加函数，我可以在用户单击一行时引发事件。

然后我可以将该行设置为事件的。但实际情况是需要取消选择之前选择的行。

执行此操作的公认方法是什么？

如何枚举和访问每一行以更改其类设置？

有没有更好的 CSS 方法来做到这一点？

额外的 所有这些方法都有效(谢谢大家)，但如果我的页面上有超过 1 个选项组，我该如何明确删除我正在使用的选项组中的事件突出显示行？

Answer 1

伙计，我们开始吧。我为你做了一个 JSfiddle

demo

$(function(){
    console.log('ready');

    $('.list-group li').click(function(e) {
        e.preventDefault()

        $that = $(this);

        $that.parent().find('li').removeClass('active');
        $that.addClass('active');
    });
})

JSFiddle 更新为拥有多个组

http://jsfiddle.net/mgjk3xk2/1/