0

我有一个带有 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;
    }

查询：

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

问题是，按钮的样式更改为单击时指定的颜色，但是当我单击另一个按钮时，我需要恢复按钮的原始样式，我该如何实现？

4

5 回答 5

2

将所有按钮设置回默认颜色（假设#1227B0来自您的代码），然后再更改$(this)。

$(document).ready(function() {
    $('.li_class').click(function() {
        $('.li_class').css('background-color', '#1227B0');
        $(this).css('background-color', '#7787F1');
    });
});
于 2012-04-17T11:40:50.790 回答
1

尝试class通过 jQuery 使用名称而不是直接的 CSS 样式。因此，当您需要将按钮标记为已单击时，您可以添加一个带有 的类名.addClass('clicked');，并在您不希望它被设置样式时将其删除：.removeClass('clicked');。

当然你需要创建你的 CSS 声明：

.clicked {
  background-color: #7787F1;
}
于 2012-04-17T11:42:39.697 回答
1

您可以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'));
    });
});​

现场演示

于 2012-04-17T11:43:25.073 回答
0

每次点击重置颜色：

$(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/

于 2012-04-17T11:44:12.870 回答
0

嗨尝试以下代码

    <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/

于 2012-04-17T11:45:05.017 回答