Bootstrap v2.3.1 ne fonctionne pas pour les onglets

Question

Je suis ayant Bootstrap version 2.3.1 et Dans que les onglets ne fonctionnent pas. Il peut être résolu si je suis mis à niveau vers une nouvelle version. Mais si j'ai mis à jour ma version bootstrap, tous les changements de vue précédents et navbar ne fonctionnent pas non plus. Donc, je veux rester dans la version 2.3.1 et je veux créer des onglets dans mon site Web. S'il vous plaît Aidez-moi dans ce merci d'avance.

<link rel="stylesheet" href="http://localhost/assets/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="http://localhost/assets/css/bootstrap-responsive.min.css" /> 

    /*! 
    * Bootstrap v2.3.1 
    * 
    * Copyright 2012 Twitter, Inc 
    * Licensed under the Apache License v2.0 
    * http://www.apache.org/licenses/LICENSE-2.0 
    * 
    * Designed and built with all the love in the world @twitter by @mdo and @fat. 

Answer 1

Voici le lien violon suivant je fait les mêmes onglets avec bootstrap 2.3 v vérifier Working fiddle Demo

Suggestion: J'ai fait face même problème dans une conception utiliser le lien suivant pour convertir votre version bootstrap & est gratuit à utiliser

Bootstrap version conversion tool

@import "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"; 
 

 
.tab:not(:target) { 
 
    display: none; 
 
} 
 

 
.tab:last-child { 
 
    display: block; 
 
} 
 

 
.tab:target ~ .tab:last-child { 
 
    display: none; 
 
} 
 

 
.tabs { 
 
    width: 30em; 
 
    margin: 6.5em auto; 
 
}

<div class="tabs"> 
 
    <div id="tab3" class="tab"> 
 
    <ul class="nav nav-tabs"> 
 
     <li><a href="#tab1">Description</a></li> 
 
     <li><a href="#tab2">How it works</a></li> 
 
     <li class="active"><a href="#tab3">Drawbacks</a></li> 
 
    </ul> 
 

 
    <ul> 
 
     <li>Tab bar should be duplicated on each tab.</li> 
 
     <li>Initially shown tab has to be the last.</li> 
 
     <li>In IE &lt; 9 all tabs are shown.</li> 
 
    </ul> 
 
    </div> 
 

 
    <div id="tab2" class="tab"> 
 
    <ul class="nav nav-tabs"> 
 
     <li><a href="#tab1">Description</a></li> 
 
     <li class="active"><a href="#tab2">How it works</a></li> 
 
     <li><a href="#tab3">Drawbacks</a></li> 
 
    </ul> 
 

 
    <ol> 
 
     <li>Show only the last tab.</li> 
 
     <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li> 
 
    </ol> 
 
    </div> 
 

 
    <div id="tab1" class="tab"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a href="#tab1">Description</a></li> 
 
     <li><a href="#tab2">How it works</a></li> 
 
     <li><a href="#tab3">Drawbacks</a></li> 
 
    </ul> 
 

 
    <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p> 
 
    </div> 
 
</div>

Answer 2

Ici, vous allez avec une solution http://jsfiddle.net/xFW8t/2752/

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<ul class="nav nav-tabs" id="myTab"> 
 
    <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> 
 
    <li><a data-target="#profile" data-toggle="tab">Profile</a></li> 
 
    <li><a data-target="#messages" data-toggle="tab">Messages</a></li> 
 
    <li><a data-target="#settings" data-toggle="tab">Settings</a></li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div class="tab-pane active" id="home">Home</div> 
 
    <div class="tab-pane" id="profile">Profile</div> 
 
    <div class="tab-pane" id="messages">Message</div> 
 
    <div class="tab-pane" id="settings">Settings</div> 
 
</div>

Espérons que cela vous aidera