导航栏的菜单活动背景动态答案

【问题标题】：Menu active background dynamic for nav bar导航栏的菜单活动背景动态
【发布时间】：2014-05-21 00:59:44
【问题描述】：

我需要一个菜单，我可以在其中为活动菜单添加不同的动态背景。

这是jsfiddle，但我无法让它在激活时删除其他背景图像。

$(function () {
    // Init Content
    var activeMenu = $('#1');
    activeMenu.toggleClass('active1');
    $('#main').load('http://www.legaus.de/PICS/1.html');


    $('#1').click(function () {
        $('#1').removeClass();
        $(this).addClass("active1");
        $('#main').load('http://www.legaus.de/PICS/1.html');
    });


    $('#2').click(function () {
        $('#2').removeClass();
        $(this).addClass("active2");
        $('#main').load('http://www.legaus.de/PICS/2.html');
    });


    $('#3').click(function () {
        $('#3').removeClass();
        $(this).addClass("active3");
        $('#main').load('http://www.legaus.de/PICS/3.html');
    });
});

谢谢

【问题讨论】：

标签： jquery css menu navigation

【解决方案1】：

将此添加到每个click 监听器

$('#1, #2, #3').removeClass();

这样每次您单击一个元素时，都会从其他元素中删除该类

像这样：

$('#1').click(function () {
    $('#2, #3').removeClass();
    $(this).addClass("active1");
    $('#main').load('http://www.legaus.de/PICS/1.html');
});


$('#2').click(function () {
    $('#1, #3').removeClass();
    $(this).addClass("active2");
    $('#main').load('http://www.legaus.de/PICS/2.html');
});


$('#3').click(function () {
    $('#1, #2').removeClass();
    $(this).addClass("active3");
    $('#main').load('http://www.legaus.de/PICS/3.html');
});

DEMO

【讨论】：

可以通过将 3 个 removeClass() 替换为：$('#1, #2, #3').removeClass(); 来缩短一点时间；
@nick True 我编辑了。甚至更短的不要从点击的类中删除类

【解决方案2】：

当我们单击其他内容时，您正在尝试删除背景图像，不是吗？如果是这样的话，我已经更新了代码检查this。我们只是从所有其他 li 中删除了该类，例如

 $('#1').click(function () {
        $('#2').removeClass("active2");
        $('#3').removeClass("active3");
        $(this).addClass("active1");
        $('#main').load('http://www.legaus.de/PICS/1.html');
    });

希望对您有所帮助。

【讨论】：