Last week I faced an interesting problem where I had to activate the selected tab after page refresh. Here is code snippet.
<ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> // first Active tab. <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> // selected tab Home page </div> <div class="tab-pane" id="profile"> // unselected tab Profile page </div> <div class="tab-pane" id="messages"> // unselected tab </div> <div class="tab-pane" id="settings"> // unselected tab Setting page </div> </div>
If I reload page then it always show me Home page div because li tag of home page has active class.
I ran this snippet using jquery-2.1.0.min.js, bootstrap.js, bootstrap-responsive.css and bootstrap.css(version 2.3.2). My requirement was to activate selected tab. Here is code snippet to show activated tab.
<script type="text/javascript"> var url = document.location.toString(); // select current url shown in browser. if (url.match('#')) { $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show'); // activate current tab after reload page. } // Change hash for page-reload $('.nav-tabs a').on('shown', function (e) { // this function call when we change tab. window.location.hash = e.target.hash; // to change hash location in url. }); </script>
It will help you to activate selected tab.
Recent Comments