How to keep the current tab active on page reload in Bootstrap?

How to keep the current tab active on page reload in Bootstrap?

Asked on November 1, 2018 in Bootstrap.
Add Comment


  • 1 Answer(s)

    For keeping the current tab active on page reload in Bootstrap can be done by using the HTML5 localStorage Object
    if we refresh the page the tab is reset to default setting. For this HTML5 localStorage object is used to save some parameter for the current tab locally in the browser
    and get it back to make the last active tab selected on page reload.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Keep Selected Bootstrap Tab Active on Page Refresh</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        var activeTab = localStorage.getItem('activeTab');
        if(activeTab){
            $('#myTab a[href="' + activeTab + '"]').tab('show');
        }
    });
    </script>
    </head>
    <body>
        <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
            <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
            <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
        </ul>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade in active">
                <h3>Section A</h3>
                <p>Aliquip placeat salvia cillum iphone...</p>
            </div>
            <div id="sectionB" class="tab-pane fade">
                <h3>Section B</h3>
                <p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
            </div>
            <div id="sectionC" class="tab-pane fade">
                <h3>Section C</h3>
                <p>Nullam hendrerit justo non leo aliquet...</p>
            </div>
        </div>
    </body>
    </html>
    

    In the above example jQuery code simply gets the <a> element’s href attribute value, when a new tab has been shown using the jQuery .attr() method and save it locally in the user’s browser through HTML5 localStorage object.
    After, when the user refresh the page it retrieves this data and activate the related tab via .tab(‘show’) method.

    Answered on November 1, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.