Maintain Bootstrap Tab selected on Page Load in ASP.Net

Last Reply 6 months ago By dharmendr

Posted 6 months ago

hello,

i am using this bootstrap tab which works fine but the only problem is when i click on linkbutton it refresh go back to tab 1 , i want on click of link button it should retain on whatever tab i am through #tab querystring

  <script>

        $(function () {
            var hash = window.location.hash;
            hash && $('ul.nav a[href="' + hash + '"]').tab('show');

            $('.nav-tabs a').click(function (e) {
                $(this).tab('show');
                var scrollmem = $('body').scrollTop();
                window.location.hash = this.hash;
                $('html,body').scrollTop(scrollmem);
            });
        });
    </script>

 

  <div class="container">
  <div class="row">

    <h1>Bootstrap Tabs</h1>

    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>I'm in Section 2.</p>
        </div>
        <div class="tab-pane" id="tab3">
          <p>I'm in Section 3.</p>

            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
        </div>
      </div>
    </div>

  </div>
</div>

 

Posted 6 months ago Modified on 6 months ago

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<div class="container">
    <div class="row">
        <h1>
            Bootstrap Tabs</h1>
        <div class="tabbable">
            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <p>
                        I'm in Section 1.</p>
                    <asp:LinkButton ID="LinkButton3" runat="server">LinkButton</asp:LinkButton>
                </div>
                <div class="tab-pane" id="tab2">
                    <p>
                        I'm in Section 2.</p>
                    <asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
                </div>
                <div class="tab-pane" id="tab3">
                    <p>
                        I'm in Section 3.</p>
                    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        var activeTab = localStorage.getItem('activeTab');
        if (activeTab) {
            $('#myTab a[href="' + activeTab + '"]').tab('show');
            window.location.href = $('#myTab a[href="' + activeTab + '"]')[0].href;
        }
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
            window.location.href = $('#myTab a[href="' + activeTab + '"]')[0].href;
        });
        $('.nav-tabs a').click(function (e) {
            $(this).tab('show');
            var scrollmem = $('body').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        });
    });
</script>