如何使用jquery突出顯示選定的列表項目？

我在列表中有幾個項目，要突出一個用戶通過應用一些CSS樣式點擊，可能是背景顏色等如何使用jquery突出顯示選定的列表項目？

我的HTML看起來像這樣：

<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(); 

    ??? 

})

來源

2013-03-08 Paul

你可以使用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

這比直接從jQuery的/ JavaScript的改變CSS屬性（與.css()方法例如）一個更好的解決方案，因爲問題的分離將使您的代碼更易於管理和可讀。

來源

2013-03-08 19:05:36 kapa

我從來沒有見過類似這樣的語法給函數分配一個變量......（例如$ thumbs =） – Paul 2013-03-08 19:15:09

@Paul我添加了一些註釋來解釋這個移動。 '$ thumbs'基本上會保存'$（'。thumbnail'）'的結果，因爲在jQuery中大多數方法會返回jQuery集合以允許鏈接。我這樣做是因爲在點擊處理程序中，我不必再爲'.thumbnail'元素查詢DOM，我已經擁有了它們。如果元素正在改變（我的意思是增加/刪除），所以不是靜態的，這個方法不會被使用，你應該再次查詢DOM。 – kapa 2013-03-08 19:18:33

非常好，謝謝你的信息。我總是在這個網站學習:) – Paul 2013-03-08 19:35:11

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

來源

2013-03-08 19:03:08 karaxuna

你???將是：

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

然後，你所要做的就是定義你的'選定'CSS類。

來源

2013-03-08 19:04:02 Kon

如果不需要積極是持續這裏有一個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;

來源

2017-01-26 01:36:04

如何使用jquery突出顯示選定的列表項目？

回答

相關問題