如何保留列表元素單擊它後突出顯示？

Question

這個問題是關於ListItems的突出顯示。

我使用以下類強調列表項目。

ul.category_list li { 
    background: none repeat scroll 0 0 #B73737; 
    border-bottom: 1px solid #CCCCCC; 
    color: #953131; 
    display: block; 
    height: 29px; 
    width: 242px; 
} 

ul.category_list li a:link,ul.category_list a:visited { 
     display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px; 
     background: #fff; text-decoration: none; color: #666; } 

    ul.category_list li a:hover { 
     display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px; 
     background: #e5e5e5 url(../images/disc_apps/nav_over.jpg) no-repeat; text-decoration: none; color: #666; } 

    ul.category_list li a:active { 
     display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px; 
     background: #e5e5e5; text-decoration: none; color: #666; } 

請http://jsfiddle.net/XMbAS/

參照本工作示例現在，我想的是，在點擊的元素應該保持高亮顯示，除非我點擊其他element.Currently情況並非如此。請幫助我。如果jquery有任何可能的話請讓我知道。

謝謝

Answer 1

我改變你的演示在這裏：

http://jsfiddle.net/XMbAS/2/

編輯：這只是一個簡單而簡單的使用CSS類的解決方案。首先重置所有具有該類的元素，然後將其添加到您特定列表中的單擊列表元素。

編輯：演示與懸停包括：
http://jsfiddle.net/balron/XMbAS/7/

在我的劇本，我只是添加和刪除一個類，所以所有的懸停定義應該沒有問題仍然工作。畢竟它關於CSS。對不起，沒有在你的代碼上做，但我放棄了試圖複製粘貼.. SO真的錯過了包含空白的一些副本。當我試圖修改你的例子時，jsfiddle也沒有聽我說話。

Answer 2

最簡單的方法，使用jQuery是：

$('a').click(
    function(){ 
     $('.highlight').removeClass('highlight'); 
     $(this).closest('li').addClass('highlight'); 

     // I'd use: 
     // return false; 
     // as well, but you've addressed that already, in your inline onclick handlers. 

    }); 

JS Fiddle demo。

但是，這沒有看到您的JavaScript或UI的其餘部分。所以你可能不得不根據你的需求來定製它。

---

修訂了jQuery，以更好地滿足您的需求，並顯示使用CSS：懸停

$('li').click(
    function(){ 
     $('.highlight').removeClass('highlight'); 
     $(this).addClass('highlight'); 
    }); 

CSS：

li { 
    background-color: #fff; 
    -webkit-transition: background-color 0.2s linear; 
    -moz-transition: background-color 0.2s linear; 
    -o-transition: background-color 0.2s linear; 
} 

.highlight, 
li:hover { 
    background-color: #ffa; 
    -webkit-transition: background-color 0.2s linear; 
    -moz-transition: background-color 0.2s linear; 
    -o-transition: background-color 0.2s linear; 
} 

Revised JS Fiddle, using CSS :hover pseudo-element

或者，使用jQuery的hover()方法：

$('li').click(
    function(){ 
     $('.highlight').removeClass('highlight'); 
     $(this).addClass('highlight'); 
    }); 

$('li').hover(
    function(){ 
     $(this).addClass('highlight'); 
    }, 
    function(){ 
     $(this).removeClass('highlight'); 
    }); 

JS Fiddle demo, using the jQuery hover() method。

參考文獻：

• hover()
• addClass()
• removeClass()