当前页面菜单的背景颜色不会改变

时间:2014-12-24 08:35:07

标签: jquery css

这是jsfiddle: http://jsfiddle.net/fht7zsm2/

我使用下面的代码来更改当前页面的背景颜色

.sf-menu .active{
             background-color:#1B3E70;
             color:white;

        }

我在脚注下面放置了脚本。我也尝试放入标题但不起作用:

<script>
$('.sf-menu a').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        });
</script>

我提到这个: Change link color of the current page with CSS

http://jsfiddle.net/7VBy9/

3 个答案:

答案 0 :(得分:0)

在你的情况下,<a>都不是兄弟姐妹,因为它在不同的<li>里面是兄弟姐妹

$('.sf-menu a').click(function(){
        $(this).addClass('active').closest('li').siblings('li').find('a').removeClass('active');
});

Updated fiddle

答案 1 :(得分:0)

只需删除JSFiddle的de JavaScript部分中的标记即可。他们不需要。

http://jsfiddle.net/fht7zsm2/

$('.sf-menu a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

答案 2 :(得分:0)

其他<a>不是<a>

的兄弟

或者您也可以使用此

$('.sf-menu a').click(function () {
    $('.sf-menu a').removeClass('active');
    $(this).addClass('active')
});

演示 - http://jsfiddle.net/fht7zsm2/2/