Come posso evidenziare una voce di elenco selezionata con jquery?

Question

Ho diversi elementi in un elenco e voglio evidenziare quello che un utente fa clic sul mediante l'applicazione di un certo stile css, forse un colore di sfondo, ecc

mio HTML simile a questa:

<ul class="thumbnails"> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb1.jpg' alt=""> 
      <span class="gifttitle">Thumb1</span> 
     </a>  
    </li> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb2.jpg' alt=""> 
      <span class="gifttitle">Thumb3</span> 
     </a>  
    </li> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb3.jpg' alt=""> 
      <span class="gifttitle">Thumb3</span> 
     </a>  
    </li> 
</ul> 

jQuery per recuperare l'elemento selezionato:

$('.thumbnail').click(function(e) { 
    e.preventDefault(); 

    ??? 

}) 

Answer 1

Si potrebbe utilizzare di class management methods (vale a dire addClass() e removeClass() in questo caso) jQuery per aggiungere una classe della voce selezionata e rimuovere la stessa classe da tutti gli altri oggetti (se desideri solo quello selezionato alla volta).

//save class name so it can be reused easily 
//if I want to change it, I have to change it one place 
var classHighlight = 'highlight'; 

//.click() will return the result of $('.thumbnail') 
//I save it for future reference so I don't have to query the DOM again 
var $thumbs = $('.thumbnail').click(function(e) { 
    e.preventDefault(); 
    //run removeClass on every element 
    //if the elements are not static, you might want to rerun $('.thumbnail') 
    //instead of the saved $thumbs 
    $thumbs.removeClass(classHighlight); 
    //add the class to the currently clicked element (this) 
    $(this).addClass(classHighlight); 
}); 

Poi nel CSS basta aggiungere:

.highlight { 
    background-color: cyan; 
    font-weight: bold; 
} 

jsFiddle Demo

Si tratta di una soluzione migliore che cambiare le proprietà CSS direttamente da jQuery/Javascript (con il metodo .css() per esempio), perché la separazione delle preoccupazioni renderà il tuo codice più gestibile e leggibile.

Answer 2

$('.thumbnail').click(function(e) { 
    e.preventDefault(); 
    $(this).css('background-color', 'red'); 
}) 

Answer 3

tua ??? sarebbe:

$('.thumbnail').removeClass('selected'); 
$(this).addClass('selected'); 

Quindi tutto ciò che dovete fare è definire la vostra classe di css 'selezionata'.

Answer 4

Se non fanno bisogno del attiva essere persistente Ecco un modo CSS:

li:focus{ 
 
    background: red; 
 
} 
 
li:active{ 
 
    background: gold; 
 
}

<ul> 
 
    <li tabindex="1">Item 1</li> 
 
    <li tabindex="1">Item 2</li> 
 
    <li tabindex="1">Item 3</li> 
 
</ul> 
 

 
Now click <b>here</b> and see why it's not persistent.

in alcune situazioni di cui sopra potrebbe essere utile - per evidenziare solo l'elemento "click-active" attualmente & hellip;