Liaison Navbar vers un onglet bootstrap spécifique sans ouvrir une nouvelle fenêtre ou un nouvel onglet?

Question

Je suis en Bootstrap 3 avec des liens dans mon navbar à Bootstrap onglets sur la page « Catégorie », comme ceci:

<li><a href="/category/#tab1">Tab1</a></li> 
<li><a href="/category/#tab2">Tab2</a></li> 

Sur ma page « catégorie », voici le code que j'ai mes onglets:

<ul class="nav nav-tabs" id="myTabs"> 
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> 
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active"> 
     <h3>Tab 1</h3> 
     <p>Some content.</p> 
    </div> 
    <div id="tab2" class="tab-pane fade"> 
     <h3>Tab 2</h3> 
     <p>Some content in Tab 2.</p> 
    </div> 
</div> 

Comment pourrais-je utiliser html ou jquery/javascript afin que si les gens cliquent sur soit le lien dans la barre de navigation, que ce soit à partir d'une autre page ou de la page « catégorie » déjà aller à cette page avec cet onglet ouvrir?

Je suis pas cherchent à avoir le lien ouvert dans une autre fenêtre ou onglet, mais la même fenêtre/onglet l'utilisateur est actuellement. (Je l'ai déjà essayé cette solution en plaçant target="_blank" dans les liens dans le navbar et en ajoutant $('#myTabs a[href="' + window.location.hash + '"]').tab('show'); comme le javascript. Ce ne fut pas ma solution préférée.

Tous les conseils/solutions que vous pourriez avoir à offrir?

Answer 1

I pense que c'est ce que vous recherchez. il ne tient pas compte d'un montant variable des onglets, mais il fait le travail pour 2 onglets.

$(document).ready(function(){ 
 
    $tab1 = $('#tab1'); 
 
    $tab2 = $('#tab2'); 
 
    $tablink1 = $('#link_tab1'); 
 
    $tablink2 = $('#link_tab2'); 
 
    $('#link_tab1 a').on('click', function(){ 
 
     
 
     $tablink1.addClass("active"); 
 
     $tab1.addClass("active"); 
 
     $tab2.removeClass("active"); 
 
     $tablink2.removeClass("active"); 
 
    }); 
 
    $('#link_tab2 a').on('click', function(){ 
 
     $tablink2.addClass("active"); 
 
     $tab2.addClass("active"); 
 
     $tab1.removeClass("active"); 
 
     $tablink1.removeClass("active"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav nav-tabs" id="myTabs"> 
 
    <li id="link_tab1" class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> 
 
    <li id="link_tab2"><a data-toggle="tab" href="#tab2">Tab 2</a></li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div id="tab1" class="tab-pane fade active in"> 
 
     <h3>Tab 1</h3> 
 
     <p>Some content.</p> 
 
    </div> 
 
    <div id="tab2" class="tab-pane fade in"> 
 
     <h3>Tab 2</h3> 
 
     <p>Some content in Tab 2.</p> 
 
    </div> 
 
</div>