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

Question

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

Answer 1

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

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

Updated fiddle

Answer 2

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

http://jsfiddle.net/fht7zsm2/

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

Answer 3

其他<a>不是<a>

的兄弟

或者您也可以使用此

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

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