CODEWITHSUNDEEP
jquerycssmenunavigation
sunilkjt
sunilkjt

Reputation: 1005

Menu active background dynamic for nav bar

I need a menu where I can add different dynamic backgrounds for active menu.

Heres the jsfiddle but I could not get it to remove other background image when one is activated.

$(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');
    });
});

Thanks

Upvotes: 2

Views: 124

Answers (2)

Aameer
Aameer

Reputation: 1376

You are trying to remove the background image when we click on something else, isn't it?.If that's the case then,I have updated the code check this.we just remove the class from all other li's e.g 

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

Hope that helps.

Upvotes: 1

laaposto
laaposto

Reputation: 12213

Add this to every click listener

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

so that every time you click an element remove the class from the others

like this :

$('#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

Upvotes: 2

Related Questions