Jquery 将所选选项卡保留在页面上重新加载_Jquery

Jquery 将所选选项卡保留在页面上重新加载

jquery

Jquery 将所选选项卡保留在页面上重新加载,jquery,Jquery,这是我的代码示例 <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

这是我的代码示例

<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>


客户申请表：：公司
//将当前选定的选项卡存储在哈希值中
$（“ul.tabs>li>a”）。打开（“所示的.bs.tab”，函数（e）{
var id=$（e.target）.attr（“href”）.substr（1）；
window.location.hash=id；
});
//加载页面时：切换到当前选定的选项卡
var hash=window.location.hash；
$（'#ulid a[href=“”+hash+'“]'）。选项卡（'show'）；








 
内容aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
内容bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
内容CCCCCCCC

如果我在页面内选择了任何选项卡，并且在重新加载页面后选择了选项卡1。无论是否选择默认的Tab1，我都希望保留在已选择的选项卡上（例如Tab4）。

使用jquery cookies插件

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

您可以在此处查看更多信息

我使用此：

<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>

鲁迪：没有解决我的问题你在使用最新的jQuery和jQuery用户界面吗？您是否已经在哈希中设置了其他内容？我正在使用的最新jquey。它应该可以与新版本的

jqueryui

一起使用。如果它是最新版本，您可以在jQuery加载之后，但在jQuery UI

$之前尝试添加它。uiBackCompat=false/脚本>

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