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

Question

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

继承人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');
    });
});

由于

Answer 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

Answer 2

当我们点击其他内容时你试图删除背景图片，不是吗？。如果是这样的话，我已经更新了代码检查this。我们只是删除所有其他的类李的例如

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

希望有所帮助。