Jquery tabs cookie 使用现有脚本

Question

可能这并不难做到，但对于我来说，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

标签 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（函数（）{ //如果这不是第一个选项卡，则隐藏它 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();
        //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;

    });

});

那么任何人都可以帮助我做到这一点。

Answer 1

我认为你最好使用 this 的 jquery ui 选项卡

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;

});

});​