J'essaie de faire fonctionner correctement mes onglets de navigation. La partie ul se met à jour correctement pour devenir active chaque fois que je clique sur différents onglets, mais le <div class="tab-content"> ne se met pas à jour correctement. Il affiche juste toujours la partie 1.

<ul class="nav nav-tabs" data-tabs="tabs">
  <li data-toggle="tab" class="active"><a href="#1">1</a></li>
  <li data-toggle="tab"><a href="#2">2</a></li>
  <li data-toggle="tab"><a href="#3">3</a></li>
  <li data-toggle="tab"><a href="#4">4</a>
</ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="1">
    <h3>1</h3>
  </div>
  <div class="tab-pane fade" id="2">
    <h3>2</h3>
  </div>
  <div class="tab-pane fade" id="3">
    <h3>3</h3>
  </div>
  <div class="tab-pane fade" id="4">
    <h3>4</h3>
  </div>
</div>

Voici également les scripts que j'utilise:

<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>

Toute aide serait grandement appréciée. J'ai déjà fait cela sur une autre page Web et cela fonctionne bien. Pour une raison quelconque, cela ne fonctionne pas ici. Je vous remercie!

EDIT: Je pense que je devrais mentionner que j'ai essayé avec et sans le fichier bootstrap.js et cela ne fonctionne pas. Je sais que je n'ai besoin que du fichier bootstrap.min.js mais j'ai pensé essayer les deux pour voir ce qui se passe.

3
AngeloS 5 janv. 2016 à 08:45

3 réponses

Meilleure réponse

Le data-toggle doit être au bon endroit.

Bonne façon: -

<li class="active">
      <a href="#1" data-toggle="tab">1</a>
</li>

Quoi qu'il en soit, le JSFiddle fonctionnel est ici.

1
abhillier 5 janv. 2016 à 07:43

Le code ci-dessous vous aidera à résoudre votre problème.

<ul class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#1" data-toggle="tab">1</a></li>
  <li><a href="#2" data-toggle="tab">2</a></li>
  <li><a href="#3" data-toggle="tab">3</a></li>
  <li><a href="#4" data-toggle="tab">4</a>
</li></ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="1">
    <h3>1</h3>
  </div>
  <div class="tab-pane fade" id="2">
    <h3>2</h3>
  </div>
  <div class="tab-pane fade" id="3">
    <h3>3</h3>
  </div>
  <div class="tab-pane fade" id="4">
    <h3>4</h3>
  </div>
</div>
0
Nimmi 5 janv. 2016 à 07:50

Je suis moi aussi confronté au même problème lorsque je travaille en safari, veuillez l'essayer dans Chrome.

Utilisez le script dans le lien mentionné ci-dessous.

<div><ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Tab content 1</div>
    <div role="tabpanel" class="tab-pane" id="profile">Tab content 2</div>
    <div role="tabpanel" class="tab-pane" id="messages">Tab content 3</div>
    <div role="tabpanel" class="tab-pane" id="settings">Tab content 4</div>
  </div>
</div>

Référence

0
Damian Kozlak 5 janv. 2016 à 08:16