Twitter Bootstrap Onglets classe active de la bascule ne fonctionne pas

Je suis en utilisant Twitter bootstrap nav onglets et de la valeur liquidative des pilules. C'est mon code html:

<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>

Maintenant, si j'ai ajouter un attribut data-toggle="pill" et data-toggle="tab" l'onglet actif de changement de classe à qui j'ai cliqué. Cependant, href ne fonctionne plus.
Si je n'utilise pas ces classes, href fonctionne mais active de la classe ne change pas et reste toujours à l'élément de cette classe a été donné lors du chargement de la page.

J'ai même essayé d'utiliser jQuery pour basculer comportement de la classe et il ne fonctionne pas aussi bien. Mon code du script est:

<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>
  • Dans mon cas, le problème était que j'avais un div après le <ul class="nav nav-tabs">. Donc, la lecture de votre post m'a aidé à résoudre ce problème.
InformationsquelleAutor CodeMonkey | 2013-04-18