jQuery element ID changing causes mistake

Question

I've got 4 divs with the ids #registrieren, #story, #faq and #mediadaten, and this jQuery script:

var menu='';
$(function()
{
    $('#registrieren').attr('id', 'menuAktiv');
    menu='registrieren';

    $('#registrieren').click(function()
    {
        if(menu != 'registrieren')
        {
            $('#menuAktiv').attr('id', menu);
            $('#registrieren').attr('id', 'menuAktiv');
            menu='registrieren';
        }
        alert(menu);
    });
    $('#story').click(function()
    {
    if(menu!='story')
    {
        $('#menuAktiv').attr('id', menu);
        $('#story').attr('id', 'menuAktiv');
        menu='story';
        }
        alert(menu);
    });
    $('#faq').click(function()
    {
        if(menu != 'faq')
        {
            $('#menuAktiv').attr('id', menu);
            $('#faq').attr('id', 'menuAktiv');
            menu='faq';
        }
        alert(menu);
    });
    $('#mediadaten').click(function()
    {
        if(menu != 'mediadaten')
        {
            $('#menuAktiv').attr('id', menu);
            $('#mediadaten').attr('id', 'menuAktiv');
            menu='mediadaten';
        }
        alert(menu);
    });
});

now, when I'm clicking on #story, #faq or #mediadaten I'm not able to change the id of #registrieren back to #menuAktiv.

The same problem happens when I'm changing another element id of those elements in the beginning. Any solutions?

Answer 1

You should be using classes instead of ids to denote which div is active.

http://api.jquery.com/addClass

http://api.jquery.com/toggleClass

http://api.jquery.com/removeClass

then use $('.classname') to select it.