Jquery click проблема с меню - PullRequest
Новая
       8

Jquery click проблема с меню

0 голосов
/ 18 июля 2011

У меня есть две вкладки в верхней части моего сайта под названием Бизнес и Личные.Когда страница загружается в первый раз, элементы вкладки «Бизнес» отображаются на панели ниже для вкладок. При нажатии на Perosnal отображаются личные элементы.Это работает нормально для меня.Теперь я хочу что-то изменить в коде, когда я нажимаю на любые пункты Личного меню, страница обновляется, и на ней снова отображаются пункты меню Бизнес.Посмотрите на веб-сайт здесь

Вот мой код Jquery: 

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

});

Я знаю, когда страница обновляется и выполняет код, который я написал в готовом документе.Когда я нажимаю на любой элемент в Персональном меню, после обновления страницы он снова переходит в Бизнес-меню и его пункты.Я не хочу, чтобы вместо этого я хотел показывать личные вещи.Как я могу это сделать ?Ваша помощь очень ценится.

Ответы [ 2 ]

1 голос
/ 18 июля 2011

Я отвечаю на мой вопрос.Я нашел решение, поэтому я просто хочу поделиться им, чтобы кто-нибудь еще мог получить пользу от ответа.Я сохранил текущий URL и использую его для решения своей проблемы.Давайте посмотрим на обновленный код jquery. 

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

});

1 голос
/ 18 июля 2011

Вы можете использовать cookie .

Добавьте некоторый код к вашим click() событиям, который устанавливает cookie, сообщая клиенту, просматриваете ли они в бизнес или личной стороне. Я не собираюсь вставлять код, потому что я просто скопирую код прямо из ссылки, которую я разместил. Но в ваших click() событиях вы захотите добавить 

setCookie("navigation_side", 1, 1);

Где второй аргумент говорит вам, на какой стороне они движутся. Я просто выбрал int, вы можете выбрать string, boolean, что угодно.

Тогда в верхней части вашего кода у вас будет 

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

Убедитесь, что вы установили соответствующее время истечения! Удачи.

...