jquery - Twitter Bootstrap Tabs active class toggle not working -

i using twitter bootstrap nav tabs , nav pills. code:

    <div class="header2" style="background-color:#1e3848">         <div id="headertab">             <ul class="nav nav-tabs">                 <li class="active ans-tab"> <a href="http://myweb.com/">home</a></li>                 <li class="toptab"><a href="http://myweb.com/score/">score</a></li>                 <li class="toptab"><a href="http://myweb.com/leaderboards/">leaderboards</a></li>             </ul>         </div>         <div id="subheadertabplayer">             <ul class="nav nav-pills">                 <li class="active"> <a href="http://myweb.com/">top</a></li>                 <li><a href="http://myweb.com/rules/" data-toggle="pill">rules</a></li>                 <li><a href="http://myweb.com/player/" data-toggle="pill">player</a></li>                 <li><a href="http://myweb.com/categories/" data-toggle="pill">categories</a></li>             </ul>         </div> </div> 

now if add attribute data-toggle="pill" , data-toggle="tab" tab active class change 1 have clicked. however, href no longer working. if not use these classes, href works active class not change , stays element class given @ load of page.

i tried using jquery toggle class behavior , not work well: jquery code:

   <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>     <script type="text/javascript">         $(window).load(function(){                     document.getelementbyid( 'subheadertabplayer' ).style.display = 'none';                     $('ul.nav-tabs li a').click(function (e) {                     var activetab= document.getelementbyclass('active');                     activetab.removeattribute("class");                          $('ul.nav-tabs li.active').removeclass('active')                         $(this).parent('li').addclass('active')                     })                     $('ul.nav-pills li a').click(function (e) {                         $('ul.nav-pills li.active').removeclass('active')                         $(this).parent('li').addclass('active')                     })                     $(".ans-tab").click(function() {                         document.getelementbyid('subheadertabplayer').style.visibility = 'visible';                         document.getelementbyid('subheadertabplayer' ).style.display = 'block';                      });                     $(".toptab").click(function() {                         document.getelementbyid('subheadertabplayer').style.visibility = 'collapse';                         document.getelementbyid('subheadertabplayer' ).style.display = 'none';                     });         });        </script> 

bootstrap nav tabs , pills work js plugin. plugin loaded on page , takes care of highlighting , remembering of active tab or pill. disables href attributes if link other pages, because when click on link page, new page loaded. js reloaded new page, , not know tab or pill active. designed work single page apps or links anchors on same page, , work fine purpose.

the jquery approach fails same reason, might easier explain.

$('ul.nav-pills li a').click(function (e) {   $('ul.nav-pills li.active').removeclass('active')   $(this).parent('li').addclass('active') }) 

you click on link, js goes off , changes class, if has enough time before next page loaded, next page loaded because href attribute on link tells browser navigate new page. , new page loads js again, can't possibly remember variables previous page, tab or pill meant active.

if going navigate other pages, might set active class on right tab specific page being loaded.

if need on client side, this, , load on each page.

$(document).ready(function () {    // set baseurl   var baseurl = 'http://myweb.com/'    // current url , replace baseurl   var href = window.location.href.replace(baseurl, '');    // remove trailing slash   href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;    // last part of current url   var page = href.substr(href.lastindexof('/') + 1);    // add trailing slash if not empty (empty means we're @ baseurl)   page = page != '' ? page + '/' : page;    // select link based on href attribute , set it's closest 'li' 'active'.    // .siblings('.active').removeclass() needed if have default 'active li'.   $('a[href="' + baseurl + page + '"]', '.nav li').closest('li').addclass('active').siblings('.active').removeclass();  }); 

it sets active tab based on last part of url, it's kind of specific scenario (and scenario) though. you'd have adapt if there file extensions or query parameters involved. every page needs @ least have link on it. , preferably has exact same header same tabs , pills rendered on other pages.

both of these last points again raise thought in mind "if have have control on being rendered onto page, have access server side", , if case, might fix there, every link new request server anyway. , solution wouldn't have rely on not robust javascript work.

so had going @ 1 stage, improve it, or implement solution post data next page , read javascript there (which easier , more robust if had file extensions or query strings deal with).

good luck it! :)