Menu déroulant de liens avec des onglets dans bootstrap

Question

J'ai un problème pour lier mon menu déroulant avec des onglets. Ce que je voudrais, c'est que l'onglet concerné soit "actif" en plus du contenu (la classe est appelée "active") lors de l'utilisation des onglets et que le contenu soit sélectionné par la liste déroulante ou la navigation par tabulation dans Bootstrap 3

Ceci est le boostrap.js qui contrôle les onglets.

Tab.prototype.show = function() { 
    var $this = this.element 
    var $ul  = $this.closest('ul:not(.dropdown-menu)') 
    var selector = $this.attr('data-target') 

    if (!selector) { 
     selector = $this.attr('href') 
     selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 
    } 

    if ($this.parent('li').hasClass('active')) return 

    var previous = $ul.find('.active:last a')[0] 
    var e  = $.Event('show.bs.tab', { 
     relatedTarget: previous 
    }) 

    $this.trigger(e) 

    if (e.isDefaultPrevented()) return 

    var $target = $(selector) 

    this.activate($this.parent('li'), $ul) 
    this.activate($target, $target.parent(), function() { 
     $this.trigger({ 
     type: 'shown.bs.tab' 
     , relatedTarget: previous 
     }) 
    }) 
    } 

    Tab.prototype.activate = function (element, container, callback) { 
    var $active = container.find('> .active') 
    var transition = callback 
     && $.support.transition 
     && $active.hasClass('fade') 

    function next() { 
     $active 
     .removeClass('active') 
     .find('> .dropdown-menu > .active') 
     .removeClass('active') 

     element.addClass('active') 

     if (transition) { 
     element[0].offsetWidth // reflow for transition 
     element.addClass('in') 
     } else { 
     element.removeClass('fade') 
     } 

     if (element.parent('.dropdown-menu')) { 
     element.closest('li.dropdown').addClass('active') 
     } 

     callback && callback() 
    } 

    transition ? 
     $active 
     .one($.support.transition.end, next) 
     .emulateTransitionEnd(150) : 
     next() 

    $active.removeClass('in') 
    } 

Voici mon code (il fonctionne très bien pour afficher le contenu pertinent dans l'onglet, mais l'onglet de navigation ne reçoivent pas la classe toggled « active »:

<div class="navbar navbar-fixed-top"> 
    <div class="container"> 
    <div class="row"> 
     <a class="navbar-brand" href="#"><img class="img-responsive" src="img/logo.jpg"></a>   
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div class="nav-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Skin Therapies <b class="caret"></b></a> 
      <ul class="dropdown-menu" id="treatment_dropdown"> 
       <li><a href="#acne_and_skin_health" id="acne_and_skin_health_li">Skin Health</a></li> 
       <li><a href="#pigmentation_and_brightening" id="pigmentation_and_brightening_li">Pigmentation &amp; Brightening</a></li> 
       <li><a href="#anti_aging" id="anti_aging_li">Anti-Aging</a></li> 
       <li><a href="#pregnancy" id="pregnancy_li">Pregnancy Stretchmarks &amp; Melasma</a></li> 
       <li><a href="#scars" id="scars_li">Scars</a></li> 
       <li><a href="#immune_compromised_skin" id="immune_compromised_skin_li">Post Chemo &amp; Radiation Therapy</a></li> 
       <li><a href="#fat_and_cellulite" id="fat_and_cellulite_li">Fat &amp; Cellulite Reduction</a></li> 
       <li><a href="#vascular" id="vascular_li">Rosacea, Angiomas &amp; Spider Veins</a></li> 
       <li><a href="#laser_hair_removal" id="laser_hair_removal_li">Laser Hair Removal</a></li> 
       <li><a href="#">Special Events</a></li> 
       <li><a href="#">For our Male Clients</a></li>     
      </ul> 
      </li> 
     </ul> 
     </div> 

J'ai alors mes onglets ....

 <!-- Treatment Menu --> 
    <div class="row"> 
    <ul class="nav nav-tabs" id="treatment_tabs"> 
     <li><a href="#acne_and_skin_health" id="acne_and_skin_health_tt">Skin Health</a></li> 
     <li><a href="#pigmentation_and_brightening" id="pigmentation_and_brightening_tt">Pigmentation &amp; Brightening</a></li> 
     <li><a href="#anti_aging" id="anti_aging_tt">Anti-Aging</a></li> 
     <li><a href="#pregnancy" id="pregnancy_tt">Pregnancy</a></li> 
     <li><a href="#scars" id="scars_tt">Scars</a></li> 
     <li><a href="#immune_compromised_skin" id="immune_compromised_skin_tt">Immune Compromised Skin</a></li> 
     <li><a href="#fat_and_cellulite" id="fat_and_cellulite_tt">Fat &amp; Cellulite</a></li> 
     <li><a href="#vascular" id="vascular_tt">Vascular</a></li> 
     <li><a href="#laser_hair_removal" id="laser_hair_removal_tt">Laser Hair Removal</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane fade active" id="acne_and_skin_health"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="pigmentation_and_brightening"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="anti_aging"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="pregnancy"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="scars"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="immune_compromised_skin"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="fat_and_cellulite"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="vascular"> 
     ... 
     </div> 
     <div class="tab-pane fade" id="laser_hair_removal"> 
     ... 
     </div> 
    </div>   
    </div> 
</div> 

C'est l'appel javascript relavent:

<script> 
    $('#treatment_tabs a:first').tab('show') // Select first tab 
    $('#treatment_tabs a').click(function (e) { 
    e.preventDefault() 
    $(this).tab('show') 
    }) 
    $('#treatment_dropdown a').click(function (e) { 
    e.preventDefault()   
    $(this).tab('show') 
    }) 
</script> 

Answer 1

L'élément pouvant être tabulé est le a (ancre) et non le contenu. Donc, cliquez sur un lien dans votre liste déroulante devrait activer l'onglet() sur une ancre de votre barre d'onglets:

$('#treatment_dropdown a').click(function (e) { 
    e.preventDefault()   
    $($(this).attr('href')+'_tt').tab('show') 
    })