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

Posted 2023-04-13

【中文标题】导航栏的菜单活动背景动态

【英文标题】：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');
    );
);

谢谢

【参考方案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');
    );

希望对您有所帮助。