Jquery click issue with the Menu

Question

I have two tabs on top of my website named Business and Personal. When the page loads for the first time the items of the Business tab are shown in the bar below to the tabs.By clicking on the Perosnal it shows the personal items. This is working fine for me. Now I want to change something in the code, when I click on any Personal Menu Items the page refreshes, and it again shows the Business menu items. Look at the website here

Here is my Jquery code :

$(document).ready(function() {

    $('.business-tab').show();
    $('.personal-tab').hide();
    $('.business-tab #block-nice_menus-2').hide();
    $('.business-top').children().css('color','#00A2C8');
    $('.personal-top').children().css('color','#000000');
    $('.business-top').click(function(e) {
        e.preventDefault();
        $(this).children().css('color','#00A2C8');
        $('.personal-top a').css('color', '#000000');
        $(this).css('margin-bottom', '0px');
        $('.personal-tab').hide();
        $('.business-tab').show();
        $('.business-tab #block-nice_menus-2').hide();
    });
    $('.personal-top').click(function(e) {
        e.preventDefault();
        $(this).children().css('color','#00A2C8');
        $('.business-top a').css('color', '#000000');
        $(this).css('margin-bottom', '0px');
        $('.personal-tab').show();
        $('.business-tab').hide();
        $('.personal-tab #block-nice_menus-2').show();
        $('.personal-tab #block-nice_menus-1').hide();
    });

});

I know when the page refreshes it execute the code which I written in document ready. When I click on any item under the Personal Menu, after the page refresh it goes again to the Business Menu and its items. I don't want that instead of it I want personal items to be shown. How can I do this ? Your help is really appreciated.

vinceh · Accepted Answer · 2011-07-18 05:42:30Z

1

You can use a cookie.

Append some code to your click() events that sets a cookie telling the client whether they are browsing in the business or personal side. I'm not going to paste code because I'll just copy code directly from the link I posted. But in your click() events you'll want to add

setCookie("navigation_side", 1, 1);

Where the second argument tells you which side they are navigating on. I just chose int, you can choose string, boolean, whatever.

Then on the top of your code, you will have

if ( getCookie("navigation_side") === 1 ) {
    $('.business-tab').show();
    $('.personal-tab').hide();
} else {
    $('.business-tab').hide();
    $('.personal-tab').show();        
}

Make sure you set appropriate expire times! Good luck.

answered Jul 18, 2011 at 5:42

vinceh

3,5101 gold badge23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

samir chauhan Over a year ago

Thanks for your answer. But I have found a another simple way to do it. I will post it.

samir chauhan · Accepted Answer · 2011-07-18 06:26:05Z

I am answering my question. I found the solution so I just want to share it so anybody else can be benefitted from the answer. I have store the current url and use it to solve my problem. Lets have a look at the updated jquery code.

$(document).ready(function() {

var href = $(location).attr('href');
var substr = href.split('/');
var currentUrl = substr[3];
if( currentUrl == 'personal-mobile' ) {
    $( '.personal-tab' ).show();
    $( '.business-tab' ).hide();
    $( '.personal-tab #block-nice_menus-1' ).hide();
    $( '.personal-top' ).children().css('color','#00A2C8');
    $('.business-top a' ).css('color', '#000000');
}
else {
    $( '.business-tab' ).show();
    $( '.personal-tab' ).hide();
    $('.business-top').children().css('color','#00A2C8');
    $('.personal-top').children().css('color','#000000');
}

$('.business-tab #block-nice_menus-2').hide();

$('.business-top').click(function(e) {
    e.preventDefault();
    $(this).children().css('color','#00A2C8');
    $('.personal-top a').css('color', '#000000');
    $(this).css('margin-bottom', '0px');
    $('.personal-tab').hide();
    $('.business-tab').show();
    $('.business-tab #block-nice_menus-2').hide();
});
$('.personal-top').click(function(e) {
    e.preventDefault();
    $(this).children().css('color','#00A2C8');
    $('.business-top a').css('color', '#000000');
    $(this).css('margin-bottom', '0px');
    $('.personal-tab').show();
    $('.business-tab').hide();
    $('.personal-tab #block-nice_menus-2').show();
    $('.personal-tab #block-nice_menus-1').hide();
});

});

Collectives™ on Stack Overflow

Jquery click issue with the Menu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related