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

尝试使用class名称而不是通过jQuery直接使用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/

单击另一个按钮后，如何将navmenu按钮返回到先前的样式

5 个答案: