Question

私は私のHTMLは次のようになり

など、リスト内のいくつかのアイテムを持っており、ユーザーは、いくつかのCSSスタイルを適用することによって、上のクリック1を強調したい、多分背景色：

<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のへ選択したアイテム取得：

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

    ??? 

}) 

Answer 1

あなたはjQueryのclass management methods（この場合はすなわちaddClass()とremoveClass()）は、選択した項目にクラスを追加し、他のすべての項目から同じクラスを削除するために使用することができます。

//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); 
}); 

次に、あなたのCSSにだけ追加します。

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

jsFiddle Demo

を。これは、（例えば.css()方法で）jQueryの/ JavaScriptから直接CSSのプロパティを変更するよりも、よりよい解決策である、なぜなら心配の分離は、あなたのコードをより扱いやすく、読みやすくします。

Answer 2

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

Answer 3

あなたを？

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

「選択された」CSSクラスを定義するだけで済みます。 （一度に選択された一つだけが欲しい場合）

Answer 4

あなたは永続するアクティブを必要としません場合は、ここで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.

は、上記の役に立つかもしれません - 現在の「クリックアクティブ」アイテム＆hellipのみを強調表示します。