Question

Hy，

我有以下mai标签代码......

$(document).ready(function() {

    $("#continut_right div.tab").hide();
    $("#continut_right div.tab:first-child").show();

    $("#navigatie_left ul li").click(function() {
        var id_tab = $(this).attr("id");
        $("#continut_right div.tab").hide();
        $("#continut_right").children("#" + id_tab).show();
    });

并且标记是这样的：

<div id="continut_right">
   <!-- tab 1 -->       
   <div class="tab" id="id1"> 
   content ... bla bla bla
   </div>
</div>

和触发标签更改的菜单：

<div id="navigatie_left">
    <a style="text-decoration: none; color:#000; font-family:Arial; font-size:15px; font-weight:bold;" href="<?php echo $_SERVER['PHP_SELF']; ?>">[ REFRESH ]</a>
        <br /><br />
        <ul>
            <li id="id1">Categorii principale</li>
            <li id="id2">Categorii secundare</li>
            <li id="id2">Texte categorii secundare</li>
        </ul>
    </div>

我如何实现代码...以记住打开了哪个选项卡，因为当我执行表单提交到php_self以保持该选项卡打开以查看更改时？??

非常感谢

Answer 1

您可以使用window.location.hash存储当前标签ID。您必须为window.location.hash上的选项卡ID编写读取$(document).ready()属性的代码，并自动切换到该选项卡。

一个例子：

$(document).ready(function(){
    var id_tab = window.location.hash;
    $("#continut_right div.tab").hide();
    if(id_tab){
       $("#continut_right").children(id_tab).show();
    }else{
       $("#continut_right div.tab:first-child").show();
    }
    $("#navigatie_left ul li").click(function() {
        var id_tab = $(this).attr("id");
        $("#continut_right div.tab").hide();
        $("#continut_right").children("#" + id_tab).show();
        window.location.hash = id_tab;
    });

});

Answer 2

您可以查看.appendTo（）的JSON Cookie解决方案。它将提供一种存储和检索最后一个活动选项卡的简单方法。

使用情况为documented，如下所示：

$.cookie( string key, mixed value [, hash options ] )

因此，您可以存储活动标签的索引：

$.cookie( 'activeTab', '3' );

然后在页面加载时使用以下命令检索它：

$.cookie( 'activeTab' ); //returns the set value

那么让我们来看看如何实现它：

$("#navigatie_left ul li").click(function() {
    var id_tab = $(this).attr("id");
    $.cookie( 'activeTab', id_tab ); // storing the new active tab
    $("#continut_right div.tab").hide();
    $("#continut_right").children("#" + id_tab).show();
});

现在让我们自动在页面加载时显示标签：

$(document).ready(function() {

    $("#continut_right div.tab").hide();
    $("#continut_right div.tab:first-child").show();
    // Which tab should we show on document.ready?
    $("#continut_right").children("#" + $.cookie('activeTab')).show();

});

jquery tab cookie ...？

2 个答案: