Как переключить выделенный выделенный элемент в список групп

У меня есть это при использовании 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>

Выбран верхний ряд.

Я только хочу показать выбранную строку User 1.

Я могу поднять событие, когда пользователь нажимает на строку, добавляя функцию Click-Event с помощью Javascript.

Затем я могу установить, что Row будет активным. но происходит то, что предыдущая выбранная строка должна быть отменена.

Каков приемлемый способ сделать это?

Как перечислить и получить доступ к каждой строке, чтобы изменить ее настройки класса?

Есть ли лучший способ CSS для этого?

ДОПОЛНИТЕЛЬНО Все эти методы работают (спасибо всем), но если у меня есть более одной группы опций на моей странице, как я могу явно удалить активную выделенную строку на той, которую я использую?

Ответ 1

Здесь мы идем приятель. Я сделал JSfiddle для ya

демо

$(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/

Ответ 2

Если вы используете jQuery, это выглядит так:

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

Ответ 3

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

Ответ 4

Я бы использовал javascript, чтобы сначала найти первый элемент внутри вашего элемента группы списка, который имеет "активный класс", а затем удалить этот класс. Когда вы это сделаете, вы можете перейти к добавлению активного класса к элементу, на который вы нажали.

Это можно сделать с помощью функций jQuery.addClass() и .removeClass().

Ответ 5

Я сделал решение только с использованием CSS (без JavaScript). Однако он не работает со стандартными тегами <ul> и <li> HTML. Другими словами, результат будет выглядеть как группа списка Boostrap только в стиле, но семантически не будет отображаться в виде HTML.

Позор, что CSS не имеет родительского селектора, и : селектор не может использоваться в таблицах стилей, что поможет нам достичь того, что вы предлагаете.

Если вы согласны с продажей семантически-сломанного кода для вашего желаемого стиля, мое решение, безусловно, поможет вам.

Это сводится к сокрытию элемента <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

Ответ 6

просто еще один способ, которым я считаю, что это лучший способ:

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

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

Ответ 7

Вероятно, бутстрап не может этого сделать. Вы можете использовать наше собственное имя класса и написать собственный css аналогично загрузке.

Например:

.choised > span { color: #DDDDDD; }