Wie ein markiertes ausgewähltes Element in einer Gruppenliste wechseln

Question

Ich habe diese Bootstrap in Verwendung:

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

Die obere Zeile ausgewählt ist.

Ich möchte immer nur die ausgewählte Zeile Benutzer 1 anzeigen.

Ich kann ein Ereignis auslösen, wenn der Benutzer auf eine Zeile klickt, indem er einem Click-Event mithilfe von Javascript eine Funktion hinzufügt.

Ich kann dann diese Zeile als aktiv festlegen. Was aber passiert, ist, dass die vorher ausgewählte Zeile abgewählt werden muss.

Was ist der akzeptierte Weg, dies zu tun?

Wie listet ich auf und auf jede Zeile zuzugreifen, um seine Klasseneinstellungen zu ändern?

Gibt es eine bessere CSS-Möglichkeit, dies zu tun?

ZUSÄTZLICHE Alle diese Methoden funktionieren (danke an alle), aber wenn ich mehr als 1 Optionsgruppe auf meiner Seite habe, wie kann ich explizit die aktiv markierte Zeile auf der einen entfernen?

Answer 1

Hier gehen wir Kumpel. Ich habe für 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 aktualisiert haben mehr als eine Gruppe

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

Answer 2

Ich würde Javascript verwenden, um zuerst das erste Element innerhalb Ihres list-group Elements zu finden, das die "aktive Klasse" hat, und dann diese Klasse entfernen. Wenn Sie das getan haben, können Sie fortfahren, die aktive Klasse zu dem Element hinzuzufügen, auf das Sie geklickt haben.

Dies kann mit den Funktionen .addClass() und .removeClass() von jQuery erfolgen.

Answer 3

eine JSfiddle gemacht Wenn Sie jQuery verwenden würde, es sieht wie folgt aus:

$(".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

Wahrscheinlich Bootstrap kann es nicht. Sie können unseren eigenen Klassennamen verwenden und unser eigenes CSS ähnlich wie im Bootstrap schreiben.

Zum Beispiel:

.choised > span { color: #DDDDDD; }

Answer 6

Ich habe eine Lösung, die nur mit Hilfe von CSS (ohne JavaScript). Es funktioniert jedoch nicht mit den Standard-HTML-Tags <ul> und <li>. Mit anderen Worten, das Ergebnis wird wie eine Boostrap-Listengruppe nur im Stil aussehen, aber semantisch keine HTML-Liste sein.

Es ist eine Schande, dass CSS doesn't have a :parent selector und the :has selector cannot be used within stylesheets, die uns helfen würde zu erreichen, was Sie vorschlagen.

Wenn Sie mit semantisch gebrochenem Code für Ihren gewünschten Stil handeln, wird Ihnen meine Lösung sicherlich helfen.

Es läuft darauf hinaus, ein <input type="radio" />-Element zu verbergen, aber nicht <label>, und dann einen CSS-Pseudo-Selektor zu verwenden, damit das Listenelement seinen Stil ändert, wenn das Optionsfeld ausgewählt wird.

würde die grundlegende CSS sein:

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

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

Und die grundlegende HTML wäre:

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

hier ein CodePen im Fall, dass Sie den Code in Aktion sehen: https://codepen.io/lehonti/pen/OzoXVa