我怎樣才能返回一個導航菜單按鈕之前的風格後點擊另一個按鈕

Question

我有一個水平導航菜單與5個按鈕，我需要改變點擊按鈕的狀態。 這是我使用來實現這個代碼：

HTML：

<div id="tab_menu"> 

<ul> 
<li class="li_class"><a href="#">Link 1</a></li> 
<li class="li_class"><a href="#">Link 2</a></li> 
<li class="li_class"><a href="#">Link 3</a></li> 
<li class="li_class"><a href="#">Link 4</a></li> 
<li class="li_class"><a href="#">Link 5</a></li> 
</ul> 

</div> 

CSS：

#tab_menu { 
     position:relative; 
     width:800px; 
     margin:0px auto; 
     padding:20px; 
     background-color:#fff; 
    } 

    ul { 
     position:absolute; 
     top:0px; 
     margin:0px; 
     background-color:#fff; 
     list-style:none; 
     overflow:auto; 
    } 

    ul li { 
     float:left; 
     width:150px; 
     background-color:#1227B0; 
     border:1px dashed #fff; 
     border-radius:0px 0px 10px 10px; 
     height:30px; 
    } 

    ul li a { 
     color:#fff; 
     width:150px; 
     text-align:center; 
     text-decoration:none; 
     display:block; 
     font-size:14px; 
     line-height:30px; 
    } 

JQUERY：

$(document).ready(function() { 
    $('.li_class').click(function() { 
     $(this).css('background-color', '#7787F1'); 
    }); 
});​ 

問題是，按鈕的風格改變爲點擊時指定的顏色，但我需要將原始風格恢復到按鈕時，我點擊另一個，我如何實現這一點？

Answer 1

將所有按鈕設置回默認顏色（假設#1227B0，從您的代碼中），然後更改$(this)。

$(document).ready(function() { 
    $('.li_class').click(function() { 
     $('.li_class').css('background-color', '#1227B0'); 
     $(this).css('background-color', '#7787F1'); 
    }); 
}); 

Answer 2

嘗試通過jQuery的使用class名稱，而不是直接的CSS樣式。因此，當您需要將按鈕標記爲已點擊時，您需要添加一個.addClass('clicked');的類名，並在您不希望它被樣式化時將其刪除：.removeClass('clicked');。

當然，你需要創建CSS聲明：

.clicked { 
    background-color: #7787F1; 
} 

Answer 3

您可以使用該data-屬性：

HTML：

<ul> 
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 1</a></li> 
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 2</a></li> 
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 3</a></li> 
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 4</a></li> 
<li data-default-color="#1227B0" class="li_class"><a href="#">Link 5</a></li> 
</ul> 

的jQuery：

$('.li_class').click(function() { 
    $(this).css('background-color', '#7787F1').siblings().each(function() { 
     $(this).css("background-color", $(this).data('default-color')); 
    }); 
});​ 

LIVE DEMO

Answer 4

重置爲每次點擊的顏色：

$(document).ready(function(){ 
      $('.li_class').click(function(){ 
       $('.li_class').css('background-color', '#1227B0'); 
       $(this).css('background-color', '#7787F1'); 
       return false; 
      }); 
     });​ 

這裏是一個的jsfiddle的作品：http://jsfiddle.net/wpzQj/5/

Answer 5

喜嘗試下面的代碼

<script> 
    $(document).ready(function(){ 
      $('.li_class').click(function(){ 
      $('.li_class').css('background-color', '#1227B0'); 
       $(this).css('background-color', '#7787F1'); 
      }); 
     }); 

    </script> 

嘗試演示在這裏http://jsfiddle.net/wpzQj/8/