Jak włączyć zaznaczony wybrany element z listy grup

Question

mam to w użyciu 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> 

Górny rząd został wybrany.

Chcę tylko pokazać wybranemu wierszowi użytkownika 1.

Mogę podnieść wydarzenie, gdy użytkownik kliknie wiersz, dodając funkcję do zdarzenia kliknięcia przy użyciu Javascript.

Mogę ustawić ten wiersz jako Aktywny. ale co się dzieje, jest to, że poprzedni wybrany wiersz musi zostać odznaczony.

Jaki jest zaakceptowany sposób na zrobienie tego?

Jak wyliczyć i uzyskać dostęp do każdego wiersza, aby zmienić jego ustawienia klasy?

Czy jest lepszy sposób CSS to zrobić?

DODATKOWE DODATKOWE Wszystkie te metody działają (dziękuję wszystkim), ale jeśli mam więcej niż jedną grupę opcji na mojej stronie, jak mogę wyraźnie usunąć aktywny podświetlony wiersz na tym, którego używam?

Answer 1

Tutaj idziemy kolego. Zrobiłem JSfiddle dla ya

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 aktualizowane mieć więcej niż jedną grupę

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

Answer 2

Chciałbym użyć javascript, aby najpierw znaleźć pierwszy element w twoim elemencie grupy list, który ma "klasę aktywną", a następnie usunąć tę klasę. Kiedy to zrobisz, możesz następnie dodać aktywną klasę do elementu, który kliknąłeś.

Można to zrobić przy pomocy funkcji .addClass() i .removeClass() jQuery.

Answer 3

Jeśli chcesz używać jQuery, wygląda to tak:

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

Answer 4

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

Answer 5

Prawdopodobnie bootstrap nie może tego. Możesz użyć naszej własnej nazwy klasy i napisać własne css podobnie jak w bootstrapie.

Na przykład:

.choised > span { color: #DDDDDD; }

Answer 6

Zrobiłem tylko rozwiązanie za pomocą CSS (bez JavaScript). Jednak nie działa ze standardowymi znacznikami HTML <ul> i <li>. Innymi słowy, wynik będzie wyglądał jak grupa listy Boostrap tylko w stylu, ale nie będzie to lista HTML, mówiąc semantycznie.

To wstyd, że CSS doesn't have a :parent selector i the :has selector cannot be used within stylesheets, które pomogą nam osiągnąć to, co sugerujesz.

Jeśli jesteś w porządku z handlem semantycznie złamanym kodem dla pożądanego stylu, moje rozwiązanie na pewno Ci pomoże.

Sprowadza się to do ukrycia elementu <input type="radio" />, ale nie do jego <label>, a następnie za pomocą pseudo-selektora CSS, aby element listy zmienił swój styl po wybraniu przycisku radiowego.

Podstawowym CSS byłoby:

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

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

a podstawowym HTML byłoby:

<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> 

Oto CodePen w przypadku, gdy chcesz zobaczyć kod w akcji: https://codepen.io/lehonti/pen/OzoXVa