web-dev-qa-db-fra.com

Bootstrap Tab ne fonctionne pas lorsque l'onglet avec data-target au lieu de href

Je développe des onglets bootstrap en utilisant l'attribut data-target Pour faire correspondre les volets d'onglets au lieu d'utiliser l'attribut href, car je développe l'application angular (href pourrait gâcher mon itinéraire).

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
 </div>

<script>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

Veuillez voir ce violon http://jsfiddle.net/xFW8t/4/ . Où j'ai recréé le tout.

Je ne veux pas que le style bootstrap soit appliqué pour mes onglets, je veux seulement la fonctionnalité, je veux que mes styles soient appliqués, est-ce de toute façon que le style bootstrap sera appliqué? S'il vous plaît, aidez-le à l'avance pour toute aide.

javascripthtmlcsstwitter-bootstrapangularjs
33
Mohamed Hussain

Ajouter data-toggle="tab" attribut dans votre balisage

<a data-target="#home" data-toggle="tab">Home</a>

Js Fiddle Demo

51
Sachin

Comme mentionné par @Sachin, vous devez spécifier le data-toggle attribut. À part cela, assurez-vous de remplir correctement votre data-targets. Ceux-ci prennent les sélecteurs jQuery, pas les identifiants des éléments, lorsqu'ils sont utilisés avec `data-target. ( lien )

2
Kippie

essayez comme ceci:

jQuery(function () {
    jQuery('#myTab a').on('click', function() {
        $(this).tab('show');
    });
})
2
Pascalz

Si vous utilisez data-toggle="tab" - vous pouvez supprimer votre initialisation js -

<script>
    jQuery(function () {
        jQuery('#myTab a:last').tab('show')
    })
</script>

Bootstrap lancera automatiquement les onglets.

Si vous souhaitez initialiser vos onglets de manière mauve - vous pouvez supprimer data-toggle="tab" à partir de la mise en page et dans tous les onglets séparément:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})
1
Azee