Question

这是我的代码示例

<head id="Head1" runat="server">
    <title>Customer Application Form ::Corporate</title>
<link rel="stylesheet" type="text/css" href="css/tabcontent.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="js/tabcontent.js"></script>
<script>
     // store the currently selected tab in the hash value
    $("ul.tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#ulid a[href="' + hash + '"]').tab('show');
</script>

</head>
<body>
<form id="Form1" runat="server" class="register">
<div id="tabs">
<ul id="ulid" class="tabs">
    <li> 
        <a href="#Tab1" id="One" class="dtls">Text A</a>
    </li>
    <li>    
        <a href="#Tab2" id="Two" class="dtls">Text B</a>
    </li>
    <li>    
        <a href="#Tab3" id="Three" class="dtls">Text C</a>
    </li>
</ul>
<p>&nbsp</p>

<div id="Tab1">Content AAAAAAAAAAAAAAAAAAAA</div>
<div id="Tab2">Content BBBBBBBBBBBBBBBBBBBB</div>
<div id="Tab3">Content CCCCCCCCCCCCCCCCCCCC</div>
</div>  

 <a href="javascript:location.reload();">
 <h1>Reload page</h1></a>
</form>

如果我在页面内选择任何标签页，并在重新加载页面后选择了Tab1。我想保留在所选的选项卡上（例如Tab4）是否选择了默认Tab1。

Answer 1

使用jquery cookies插件

$('#tabID').tabs({ cookie: { expires: 999, name: "HomepageA" }, cache: false, collapsible: true });

您可以在此处查看更多信息Remember which tab was active after refresh

Answer 2

我用这个：

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">        $.uiBackCompat = false;</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

和js：

     $("#divTabs").tabs({
        activate: function (event, ui) {
            window.location.hash = 'tab=' + $(this).tabs('option', 'active');
        },
        create: function () {
            if (window.location.hash) {
                var active = parseInt(window.location.hash.replace('#tab=', ''));
                $(this).tabs("option", "active", active);
            }
        }
    });

在页面重新加载上保留选定的选项卡

2 个答案: