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.
Vous devez vous connecter pour publier un commentaire.
Bootstrap nav onglets et les pilules de travailler avec un JS du plugin. Le plugin est chargé sur la page et prend soin de la mise en évidence et le souvenir de l'actif actuellement onglet ou une pilule. Il désactive les attributs href si elles renvoient à d'autres pages, tout simplement parce que lorsque vous cliquez sur un lien vers une autre page, une nouvelle page est chargée. Le JS est ensuite rechargé pour cette nouvelle page, et il ne sait pas sur quel onglet ou la pilule est actuellement active. Ils sont conçus pour fonctionner avec des single page apps ou des liens vers des ancres sur la même page, et qu'ils fonctionnent très bien à cette fin.
Le jQuery ne parvient pas, pour la même raison, mais peut-être plus facile à expliquer.
Vous cliquez sur un lien, JS s'éteint et les changements de la classe, que si elle a assez de temps pour le faire avant le prochain chargement d'une page, cette page est chargé, car l'attribut href du lien indique au navigateur d'accéder à une nouvelle page. Et la nouvelle page de chargement de votre JS de nouveau, il ne peut pas se rappeler les variables de la page précédente, à l'instar de l'onglet ou la pilule est destiné à être actif.
Si vous allez naviguer vers d'autres pages, vous pourriez tout aussi bien définir la classe active sur l'onglet de droite de la page qui est en cours de chargement.
Si vous avez vraiment besoin de le faire sur le côté client, vous pourriez faire quelque chose comme cela, et de le charger sur chaque page.
Il définit l'onglet actif basé sur la dernière partie de l'URL, c'est une sorte de spécifique à votre scénario (et, auparavant, mon scénario) si. Vous devez l'adapter si il y avait des extensions de fichier ou de requête de paramètres impliqués. Chaque page doit au moins avoir un lien vers elle-même sur elle. Et de préférence a exactement le même en-tête, avec les mêmes onglets et les pilules rendus sur toutes les autres pages.
Ces deux derniers points de nouveau lever la pensée dans mon esprit "si vous disposez de cette beaucoup de contrôle sur ce qui est exactement le rendu sur la page, vous avez probablement accès à la côté serveur", et si c'est le cas, vous pourriez aussi bien l'y fixer, comme tous les liens d'une nouvelle requête vers le serveur de toute façon. Et votre solution de ne pas avoir à compter sur certains pas si robuste JavaScript pour fonctionner.
C'est donc ce que j'ai dû aller à un certain stade, vous pourriez l'améliorer ou mettre en place une solution où vous poster quelques données à la page suivante et de le lire avec le JavaScript (qui serait probablement plus facile et plus robuste si vous avez eu des extensions de fichier ou de chaînes de requête à traiter).
Bonne chance avec elle! 🙂
active
classe avant d'envoyer la page au client. Ou si elles sont des pages statiques, il suffit d'ajouter la classe active à l'onglet de droite ou de pilule pour chaque page.Quelque chose à considérer: Si chaque élément li utilise un contrôleur différent, voici quelque chose que vous pourriez essayer.
Comment obtenir de Twitter Bootstrap navigation pour voir lien actif?
Votre code pourrait ressembler à quelque chose comme ceci:
Cet exemple a fonctionné pour moi:
Bien que cet exemple ne fonctionne pas
Retrait .parent("li") a contribué à la.
C'est un plus généralisée côté client de la solution à l'aide de jQuery. Il ne suppose que vos onglets a les données-activer attribut et chaque groupe d'onglets est enveloppé dans une sorte de élément conteneur.
J'ai eu un problème similaire: quand on clique dessus, plaquettes de devenir actif, mais ne serait pas supprimer correctement le
active
classe à partir d'autres onglets (c'est à dire chaque onglet de l'utilisateur a cliqué sur une page vue auraitactive
classe).De commutation à partir d'un
<ol>
à un<ul>
fait les onglets de se comporter correctement.J'ai suivi @syeh solution et obtenu le droit. Ci-dessous est un extrait de mon code.
Puis dans le "contenu" du fichier, juste exiger/include votre navline.php