82 votes

Les onglets Twitter Bootstrap ne fonctionnent pas : lorsque je clique dessus, rien ne se passe

J'essaie de mettre en œuvre les onglets Twitter Bootstrap dans le code suivant, mais cela ne semble pas fonctionner. Les onglets s'affichent, mais lorsque je clique dessus, rien ne se passe. Le code ci-dessous est le seul que j'utilise. Tous les autres CSS/JS scripts sont copiés du cadre Twitter Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>

3 votes

Ajout de data-toggle a fonctionné pour moi aussi ; c'est vrai pour Bootstrap 3 également. Voici un bootstrap avec un exemple fonctionnel : bootply.com/74927

87voto

BartekR Points 2185

Vous devez ajouter le plugin tabs à votre code

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

Eh bien, ça n'a pas marché. J'ai fait quelques tests et ça a commencé à fonctionner quand :

  1. déplacé (mis à jour à 1.7) jQuery script à <head> section
  2. ajouté data-toggle="tab" aux liens et à l'identification pour <ul> onglet
  3. modifié $(".tabs").tabs(); a $("#tabs").tab();
  4. et d'autres choses qui ne devraient pas avoir d'importance

Voici un code

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>

12 votes

Merci Bartek ; cependant, je pense que le script de bootstrap.js contient également bootstrap-tab.js. Veuillez me corriger si je me trompe. Quoi qu'il en soit, j'ai ajouté bootstrap-tab.js, et cela ne fonctionne toujours pas.

0 votes

Vous avez raison, mais cela dépend aussi de la construction personnalisée de bootstrap :) ... supprimé l'autre partie du commentaire ; je n'avais pas remarqué que vous aliasiez les espaces de noms...

0 votes

J'ai également essayé cela ; cela ne fonctionne pas. Le code HTML ci-dessus fonctionne-t-il pour vous ?

71voto

Jacky Points 1063

Les éléments clés comprennent :

  1. le site class="nav nav-tabs" y data-tabs="tabs" de ul
  2. le site data-toggle="tab" y href="#orange" de la a
  3. le site class="tab-content" de la div du contenu
  4. le site class="tab-pane" y id de la div des articles

Le code complet est le suivant :

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

0 votes

Que faire si je veux appeler une fonction lorsqu'un onglet devient actif pour charger le contenu de l'onglet ?

0 votes

Excellent, ce conseil m'a aidé. Merci !

0 votes

Si vous l'utilisez avec AngularJS, donnez à ul un id="myTabs", puis ajoutez : $('#myTabs a').click(function (e) { e.preventDefault() ; $(this).tab('show') ; }) ;

23voto

IdaS Points 173

J'ai eu un problème avec les onglets Bootstrap récemment en suivant leurs directives en ligne mais il y a actuellement une erreur dans leur exemple de balisage. data-tabs="tabs "est manquant sur <ul> élément. Sans l'utilisation de data-toggle sur les liens ne fonctionne pas.

18voto

kewang Points 176

J'ai le même problème, mais les réponses ci-dessus peuvent être délicates pour moi.

J'ai trouvé l'autre réponse qui peut peut-être résoudre votre question Twitter Bootstrap Js (onglets, popups, dropdown) ne fonctionne pas dans Drupal

place jquery.js avant bootstrap.tab.js

16voto

Andres Ilich Points 41712

Vous manquez le data-toggle="tab" data-tag sur vos urls de menu pour que vos scripts ne puissent pas savoir où se trouvent vos boutons de tabulation :

HTML

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X