我怎样才能返回一个导航菜单按钮之前的风格后点击另一个按钮

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/