jquery menu problem

[ramkrishna.dhakad]

I am working on a project which is having jquery driven menus.but it is not working-
the code is

$(function(){
$('a#home').click(function(b){ 

    b.preventDefault();
    $.cookie('class','home');

});
$('a#write').click(function(c){ 

    c.preventDefault();
    $.cookie('class','write');
});
$('a#comments').click(function(d){ 

    d.preventDefault();
    $.cookie('class','comments');

});
$('a#medias').click(function(e){ 

    e.preventDefault();
    $.cookie('class','medias');

});
$('a#users').click(function(f){ 

    f.preventDefault();
    $.cookie('class','users');

});
$('a#stats').click(function(g){ 

    g.preventDefault();
    $.cookie('class','stats');


});
$('a#settings').click(function(h){ 

     h.preventDefault();  
     $.cookie('class','settings');

});
$('a#backup').click(function(i){ 

    i.preventDefault();
    $.cookie('class','backup');

});
var class=$.cookie('class');

switch($.cookie('class')) {
    case 'home': $('#hom').show();
    $('#writ').hide();
    $('#comment').hide();
    $('#media').hide();
    $('#user').hide();
    $('#stat').hide();
    $('#setting').hide();
    $('#backu').hide(); 
 $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').removeClass('home');
    $('li#write').addClass('write');
    $('li#comments').addClass('comments');
    $('li#medias').addClass('medias');
    $('li#users').addClass('users');
    $('li#stats').addClass('stats');
    $('li#settings').addClass('settings');
    $('li#backup').addClass('backup');



    $('li#home').removeClass('home');
$('li#home').addClass('home current');    
     break;

case 'write': $('#hom').hide();
    $('#writ').show();
    $('#comment').hide();
    $('#media').hide();
    $('#user').hide();
    $('#stat').hide();
    $('#setting').hide();
    $('#backu').hide();
         $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').addClass('home');
    $('li#write').removeClass('write');
    $('li#comments').addClass('comments');
    $('li#medias').addClass('medias');
    $('li#users').addClass('users');
    $('li#stats').addClass('stats');
    $('li#settings').addClass('settings');
    $('li#backup').addClass('backup');

$('li#write').removeClass('write');
$('li#write').addClass('write current');
break;
case'comment': $('#hom').hide();
    $('#writ').hide();
    $('#comment').show();
    $('#media').hide();
    $('#user').hide();
    $('#stat').hide();
    $('#setting').hide();
    $('#backu').hide();
     $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').addClass('home');
    $('li#write').addClass('write');
    $('li#comments').removeClass('comments');
    $('li#medias').addClass('medias');
    $('li#users').addClass('users');
    $('li#stats').addClass('stats');
    $('li#settings').addClass('settings');
    $('li#backup').addClass('backup');

$('li#comments').removeClass('comments');
$('li#comments').addClass('comments current');
break;
case'users': $('#hom').hide();
    $('#writ').hide();
    $('#comment').hide();
    $('#media').show();
    $('#user').hide();
    $('#stat').hide();
    $('#setting').hide();
    $('#backu').hide();
     $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').addClass('home');
    $('li#write').addClass('write');
    $('li#comments').addClass('comments');
    $('li#medias').removeClass('medias');
    $('li#users').addClass('users');
    $('li#stats').addClass('stats');
    $('li#settings').addClass('settings');
    $('li#backup').addClass('backup');

$('li#medias').removeClass('medias');
$('li#medias').addClass('medias current');
break;
case'medias':$('#hom').hide();
    $('#writ').hide();
    $('#comment').hide();
    $('#media').hide();
    $('#user').show();
    $('#stat').hide();
    $('#setting').hide();
    $('#backu').hide();
     $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').addClass('home');
    $('li#write').addClass('write');
    $('li#comments').addClass('comments');
    $('li#medias').addClass('medias');
    $('li#users').removeClass('users');
    $('li#stats').addClass('stats');
    $('li#settings').addClass('settings');
    $('li#backup').addClass('backup');

$('li#users').removeClass('users');
$('li#users').addClass('users current');
break;
case'stats':$('#hom').hide();
    $('#writ').hide();
    $('#comment').hide();
    $('#media').hide();
    $('#user').hide();
    $('#stat').show();
    $('#setting').hide();
    $('#backu').hide();
      $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').addClass('home');
    $('li#write').addClass('write');
    $('li#comments').addClass('comments');
    $('li#medias').addClass('medias');
    $('li#users').addClass('users');
    $('li#stats').removeClass('stats');
    $('li#settings').addClass('settings');
    $('li#backup').addClass('backup');

$('li#stats').removeClass('stats');
$('li#stats').addClass('stats current');
break;
case'settings':$('#hom').hide();
    $('#writ').hide();
    $('#comment').hide();
    $('#media').hide();
    $('#user').hide();
    $('#stat').hide();
    $('#setting').show();
    $('#backu').hide();
     $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').addClass('home');
    $('li#write').addClass('write');
    $('li#comments').addClass('comments');
    $('li#medias').addClass('medias');
    $('li#users').addClass('users');
    $('li#stats').addClass('stats');
    $('li#settings').removeClass('settings');
    $('li#backup').addClass('backup');

$('li#settings').removeClass('settings');
$('li#settings').addClass('settings current');
break;
case'backup':$('#hom').hide();
    $('#writ').hide();
    $('#comment').hide();
    $('#media').hide();
    $('#user').hide();
    $('#stat').hide();
    $('#setting').hide();
    $('#backu').show();
     $('li#home').removeClass('home current');
    $('li#write').removeClass('home current');
    $('li#comments').removeClass('home current');
    $('li#medias').removeClass('home current');
    $('li#users').removeClass('home current');
    $('li#stats').removeClass('home current');
    $('li#settings').removeClass('home current');
    $('li#backup').removeClass('home current');

    $('li#home').addClass('home');
    $('li#write').addClass('write');
    $('li#comments').addClass('comments');
    $('li#medias').addClass('medias');
    $('li#users').addClass('users');
    $('li#stats').addClass('stats');
    $('li#settings').addClass('settings');
    $('li#backup').removeClass('backup');

$('li#backup').removeClass('buckup');
$('li#backup').addClass('backup current');
break;
default:$('#hom').show();
$('#writ').hide();
$('#comment').hide();
$('#media').hide();
$('#user').hide();
$('#stat').hide();
$('#setting').hide();
$('#backu').hide();
$('li#home').removeClass('home');
$('li#home').addClass('home current');

}




});

[JorgeM]

All you have provided is your jQuery code. While the issue can be within your code, it can be in your HTML and in your script references, etc. do you have the web site online? Or on jsfiddle so we can see the entire code?

[diafol]

Oh man, that looks like a lot of hassle.
Can't you join up your ids? Like:

$('#writ').hide();
$('#comment').hide();
$('#media').hide();
$('#user').hide();
$('#stat').hide();
$('#setting').hide();
$('#backu').hide(); 

To:

$('#writ,#comment,#media,#user,#stat,#setting,#backu').hide(); 

You could even set up the ids in an array and output to string and use that instead.

You seem to have a few spelling mistakes - 'writ', 'backu', 'hom'? Is this the case?

You could probably cut this code to from 300 about 15-20 lines.

[diafol]

Here's a quick idea:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    .current{
        color: green;   
        font-weight: bold;
    }
</style>
</head>

<body>
<div id="nav">
    <ul>
        <li><a href="#" id="home">Home</a></li>
        <li><a href="#" id="write">Write</a></li>
        <li><a href="#" id="comments">Comments</a></li>
        <li><a href="#" id="medias">Medias</a></li>
        <li><a href="#" id="users">Users</a></li>
        <li><a href="#" id="stats">Stats</a></li>
        <li><a href="#" id="settings">Settings</a></li>
        <li><a href="#" id="backup">Backup</a></li>
    </ul>
</div>

<div id="hom">
    This is home content
</div>
<div id="writ">
    This is write content
</div>
<div id="comment">
    This is comments content
</div>
<div id="media">
    This is medias content
</div>
<div id="user">
    This is users content
</div>
<div id="stat">
    This is stats content
</div>
<div id="setting">
    This is settings content
</div>
<div id="backu">
    This is backup content
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script>
$(function(){
    var links = Array('home','write','comments','medias','users','stats','settings','backup');
    var areas = Array('#hom','#writ','#comment','#media','#user','#stat','#setting','#backu');
    var linkString = '#' + links.join(',#');    
    if($.cookie('class') == null)$.cookie('class', 0);
    doChanges($.cookie('class'));
    $(linkString).click(function(e){
        selected = $(this).attr('id');
        myIndex = jQuery.inArray(selected, links);
        $.cookie('class', myIndex);
        doChanges(myIndex);
    });
    function doChanges(i){
        $.each(areas, function(index, value){
            if(parseInt(i) !== parseInt(index) ){
                $(value).hide();
                $('#' + links[index]).removeClass('current');
            }else{
                $(value).show();
                $('#' + links[index]).addClass('current');
            }
        });
    }
});
</script>
</body>
</html>

The cookies plugin from here: https://github.com/carhartl/jquery-cookie

//EDIT

No need for a loop:

<script>
$(function(){
    //Set up Variables
    var links = Array('home','write','comments','medias','users','stats','settings','backup');
    var areas = Array('#hom','#writ','#comment','#media','#user','#stat','#setting','#backu');
    var linkString = '#' + links.join(',#');    
    //First Run on Page Load
    if($.cookie('class') == null)$.cookie('class', 0);
    doChanges($.cookie('class'),false);
    //Manage Clicks
    $(linkString).click(function(e){
        selected = $(this).attr('id');
        myIndex = jQuery.inArray(selected, links);
        oldvalue = $.cookie('class');
        $.cookie('class', myIndex);
        doChanges(myIndex, oldvalue);
    });
    //Effect Changes
    function doChanges(newValue, oldValue){
        if(oldValue){
            $(areas[oldValue]).hide();
            $('#' + links[oldValue]).removeClass('current');
        }
        $(areas[newValue]).show();
        $('#' + links[newValue]).addClass('current');
    }
});
</script>

Start with:

<style>
    .current{
        color: green;   
        font-weight: bold;
    }
    #hom, #writ, #comment, #media, #user, #stat, #setting, #backu{
        display: none;  
    }
</style>

To hide all content and to stop the 'all content' flash on page load.