CODEWITHSUNDEEP
jqueryjquery-click-event
samir chauhan
samir chauhan

Reputation: 1543

Jquery click issue with the Menu

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.

Upvotes: 0

Views: 106

Answers (2)

samir chauhan
samir chauhan

Reputation: 1543

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

});

Upvotes: 1

vinceh
vinceh

Reputation: 3510

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.

Upvotes: 1

Related Questions