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

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方式来做到这一点？

附加所有这些方法都有效(感谢所有人)但是如果我的页面上有多个选项组,我怎样才能明确删除我正在使用的那个上的活动突出显示的行？

Answer 1

在这里,我们去伙计.我为你做了一个JSfiddle

演示

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

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

        $that = $(this);

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

JSFiddle更新为拥有多个Group

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

Answer 2

如果您正在使用jQuery,它看起来像这样:

$(".list-group .list-group-item").click(function(e) {
   $(".list-group .list-group-item").removeClass("active");
   $(e.target).addClass("active");
});