Файл cookie вкладок Jquery использует существующий скрипт - PullRequest
Новая
       21

Файл cookie вкладок Jquery использует существующий скрипт

2 голосов
/ 26 марта 2012

Может быть, это не так сложно сделать, но не из истории JS так сложно понять для меня. Я пытаюсь сохранить выбранную вкладку в файле cookie, поэтому, если страница обновилась, она отобразит выбранную вкладку ранее.

Я уже использую макет сетки списка для своего веб-сайта, а также установил cookie и работает нормально. Я публикую код cookie, который я использую для этого, а также вкладки html и javascript.

Список / Сетка Cookie JS 

    $(function() {
        var cc = $.cookie('list_grid');
        if (cc == 'g') {
            $('#listgrid').addClass('grid');
            $('#grid').addClass('current');            
        } else {
            $('#listgrid').removeClass('grid');
            $('#list').addClass('current');
        }
    });

$(document).ready(function() {

    $('#grid').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#listgrid').fadeOut(500, function() {
            $(this).addClass('grid').fadeIn(500);
            $.cookie('list_grid', 'g');
        });
        return false;
    });

    $('#list').click(function() {
        $(".current").removeClass("current");
        $(this).addClass("current");

        $('#listgrid').fadeOut(500, function() {
            $(this).removeClass('grid').fadeIn(500);
            $.cookie('list_grid', null);
        });
        return false;
    });

});

Мои вкладки HTML

Вкладка 1 Tab 2 Вкладка 3 
<div class="tabs">

    <div id="tab1" class="tab">
    </div>

    <div id="tab2" class="tab">
    </div>

    <div id="tab3" class="tab">
    </div>
</div>

Вкладки JS jQuery (документ) .ready (function () { // если это не первая вкладка, скрыть JQuery ( "Вкладка: нет (: первая).") скрыть ();

. 
    //to fix u know who
    jQuery(".tab:first").show();

    //when we click one of the tabs
    jQuery(".htabs a").click(function () {

        $(".current").removeClass("current");
        $(this).addClass("current");

        //get the ID of the element we need to show
        stringref = jQuery(this).attr("href").split('#')[1];
        //hide the tabs that doesn't match the ID
        jQuery('.tab:not(#' + stringref + ')').hide();
        //fix
        if (jQuery.browser.msie && jQuery.browser.version.substr(0, 3) == "6.0") {
            jQuery('.tab#' + stringref).show();
        } else
        //display our tab fading it in
        jQuery('.tab#' + stringref).fadeIn();
        //stay with me
        return false;

    });

});

Так может кто-нибудь, пожалуйста, помогите мне сделать это.

1 Ответ

1 голос
/ 26 марта 2012

Я думаю, вам лучше использовать вкладки jquery ui для this 

jQuery(document).ready(function () { 

// get the cookie
 var tabcookie = $.cookie('tab');    
 if (tabcookie){
     jQuery('.tab:not(#' + tabcookie + ')').hide();
     jQuery('.tab#' + tabcookie ).show();    
 }else{
      jQuery(".tab:not(:first)").hide();

    //to fix u know who
    jQuery(".tab:first").show();
 }


//when we click one of the tabs
jQuery(".htabs a").click(function () {

    $(".current").removeClass("current");
    $(this).addClass("current");

    //get the ID of the element we need to show
    stringref = jQuery(this).attr("href").split('#')[1];        
    //hide the tabs that doesn't match the ID
    jQuery('.tab:not(#' + stringref + ')').hide();

    // save the cookie
    $.cookie('tab', stringref);


    //fix
    if (jQuery.browser.msie && jQuery.browser.version.substr(0, 3) == "6.0") {
        jQuery('.tab#' + stringref).show();
    } else
    //display our tab fading it in
    jQuery('.tab#' + stringref).fadeIn();
    //stay with me
    return false;

});

});

...