CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Mudassar Khani
Mudassar Khani

Reputation: 1479

Bootstrap Navtab Default tab show

I have following code for my nav tabs 

<ul id="myTab" class="nav nav-tabs nav-tabs1" role="tablist">
    <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Members Online </a></li>
    <?php if(count($new_contacts)>0){?>
    <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">New Contacts (<?php echo count($new_contacts)?>)</a></li>
    <?php }else{?>
    <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">New Contacts</a></li>
    <?php }?>
    <li role="presentation"><a href="#profile1" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Accepted Contacts</a></li>
    <li role="presentation"><a href="#profile2" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Interests Sent</a></li>
    <li role="presentation"><a href="#profile3" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Recently Viewed</a></li>
</ul>

My Page

Which creates the shown nav tab in the image of my page. The problem here is the default nav tab is Members Online. i.e. the first one. When page refreshes e.g. In case I accept and new contact request, it takes me to first tab. I want to stay on current page after the page refreshes. How can I store the state of current nav tab which is on display and show it on refresh. I believe it can be done by Jquery.

Anyone have a solution?

Upvotes: 0

Views: 445

Answers (2)

Suman Pathak
Suman Pathak

Reputation: 300

Save last visited tab in your local storage.Use the following jquery code to achieve your goal :

   <script>
        $(document).ready(function () {
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                localStorage.setItem('lastTab', $(this).attr('href'));
            });

            var lastTab = localStorage.getItem('lastTab');
            if (lastTab) {
                $('[href="' + lastTab + '"]').tab('show');
            }
        })
    </script>

Upvotes: 1

Maddy
Maddy

Reputation: 105

Try this, 

<script>
$(document).ready(function(e) {

if(location.hash ) {    
//  show the last selected tab      
    $('#myTab a[href=' + location.hash + ']').tab('show');      
}

//save the selected tab
$(document.body).on("click", "#myTab a[href]", function(ev) {       
    location.hash = this.getAttribute("href");          
});
});
</script>

Hope this will work...

Upvotes: 0

Related Questions