選中時突出顯示項目

Question

我有一個元素（div）的列表，它們都具有相同的背景顏色（白色）。現在，我想讓背景顏色一旦被點擊就改變（變爲藍色）。事情是這樣的，一次只能突出顯示一個。

所以，假設您點擊div1，它變成藍色。如果點擊div2，則需要將div1變成白色，然後div2變爲藍色。

排序的選擇方法，不是？

有沒有一個獨立的方法來做到這一點？

Answer 1

試試這個：

jQuery代碼：

$('div').bind('click',function(){ 
$('div').removeClass('selected');//remove selected class from previously added div 
$(this).addClass('selected');//add class to current div 
}) 

CSS：

.selected{ 
background-color:blue; 
} 

Answer 2

嘗試......

<style type="text/css"><!-- 
    #menu_top { 
    list-style:none; 
    width:100%; 
    float:left; 
    margin:8px 0; 
    border-bottom:8px solid #60CBFF; 
    font:normal 11px/22px arial,helvetica,sans-serif; 
    } 

    #menu_top li, #menu_top a { 
    float:left; 
    height:22px; 
    } 

    #menu_top li { 
    margin-left:4px; 
    } 


    #menu_top a { 
     background: none repeat scroll 0 0 white; 
     color: #000000; 
     padding: 0 8px; 
     position: relative; 
     text-decoration: none; 
    } 

    #menu_top a:active, 
    #menu_top a:focus, 
     #menu_top a:hover { 
     background: none repeat scroll 0 0 blue; 
    } 


</style> 

和HTML代碼..

<ul id="menu_top"> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Portfolio</a></li> 
    <li><a href="#">Download</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Career</a></li> 
    <li><a href="#">Contact Us</a></li> 
</ul> 

您可以檢查我的JSFIDDLE也。

Answer 3

對於庫無關的解決方案，你可以使用這樣的事情：

<style> 
    .clickable { 
     background-color: #eee; 
     height: 30px; 
     margin: 10px; 
    } 
</style> 

<div> 
    <div class="clickable"></div> 
    <div class="clickable"></div> 
    <div class="clickable"></div> 
</div> 

<script> 
    var clickables = document.getElementsByClassName('clickable'); 

    var resetSiblings = function() { 
     for (var i = clickables.length - 1; i >= 0 ; i--) 
      clickables[i].style.backgroundColor = '#eee'; 
    }; 

    var clickHandler = function (ev) { 
     resetSiblings(); 
     ev.target.style.backgroundColor = '#00f' 
    }; 

    for (var i = clickables.length - 1; i >= 0 ; i--) 
     clickables[i].addEventListener("click", clickHandler, false); 
</script>