0

This is my code sample

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

If I selected any tab inside page and after reload the page the Tab1 is selected. I want to remain on that tab which is selected (eg Tab4) whether default Tab1 is selected.

MohsinJan110
  • 3
  • 3

2 Answers2

0

Use jquery cookies plugin for that 

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

more info you can check here Remember which tab was active after refresh

Community
  • 1
  • 1
LHH
  • 3,233
  • 1
  • 20
  • 27
0

I use this:

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

And the 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);
            }
        }
    });
Rudy
  • 2,323
  • 1
  • 21
  • 23