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

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/

Answer 2

如果您正在使用jQuery，它看起来像这样：

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

Answer 3

var $lis = $('.list-group li')
$lis.on('click', function(){
  $lis.removeClass('active')
  $(this).addClass('active')
})

Answer 4

我会使用javascript首先找到list-group元素中具有＆＃34;活动类＆＃34;的第一个元素，然后删除该类。完成后，您可以继续将活动类添加到您单击的元素中。

这可以通过jQuery的.addClass（）和.removeClass（）功能来完成。

Answer 5

我只使用CSS（没有JavaScript）制作了解决方案。但是，它不适用于标准<ul>和<li> HTML标记。换句话说，结果看起来只是样式中的Boostrap列表组，但从语义上讲它不是HTML列表。

遗憾的是CSS doesn't have a :parent selector和the :has selector cannot be used within stylesheets，这有助于我们实现您的建议。

如果您可以根据所需的风格交换语义损坏的代码，我的解决方案肯定会对您有所帮助。

归结为隐藏<input type="radio" />元素，但不隐藏其<label>，然后使用CSS伪选择器，以便在选择单选按钮时使列表元素更改其样式。

基本的CSS将是：

.list-group input[type="radio"] {
  display: none;
}

.list-group input[type="radio"]:checked + .list-group-item {
  background-color: #0275D8;
  color: #FFF;
}

基本HTML将是：

<div class=""list-group>
  <input type="radio" name="RadioInputName" value="Value1" id="Radio1" />
  <label class="list-group-item" for="Radio1">Caption for Radio1</label>
</div>

以下是CodePen，以防您想要查看代码： https://codepen.io/lehonti/pen/OzoXVa

Answer 6

我认为这是一种更好的方法：

$(document).off("click" ,".list-group .list-group-item").on("click" ,".list-group .list-group-item" ,function(){

    $(this).sibbling().removeClass("active");
    $(this).addClass("class");
});

Answer 7

这对我有用...

Mono<Date> currentTime = Mono.just(Calendar.getInstance().getTime());
Mono<Date> realCurrentTime = Mono.defer(() -> Mono.just(Calendar.getInstance().getTime()));

// 1 sec sleep
Thread.sleep(1000);
currentTime.subscribe(time -> System.out.println("Current Time " + time.getTime()));
realCurrentTime.subscribe(time -> System.out.println("Real current Time " + time.getTime()));

Thread.sleep(2000);
currentTime.subscribe(time -> System.out.println("Current Time " + time.getTime()));
realCurrentTime.subscribe(time -> System.out.println("Real current Time " + time.getTime()));

Answer 8

$(function(){
    console.log('ready');
    
    $('.list-group li').click(function(e) {
        e.preventDefault()
        
        $that = $(this);
        
        $that.parent().find('li').removeClass('active');
        $that.addClass('active');
    });
})

  //style
      .list-group-item.active 
      {
        z-index: 2;
        color: #fff;
         background-color: white; 
        border-color: #0168fa;
        color: white;
      }

Answer 9

可能bootstrap不能。您可以使用我们自己的类名，并像在bootstrap中一样编写我们自己的css。

例如：

.choised > span { color: #DDDDDD; }

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

9 个答案: