鏈接下拉菜單與引導中的標籤

我有問題鏈接我的下拉菜單與選項卡。我想要的是，使用選項卡並通過Bootstrap 3中的下拉或選項卡導航選擇內容時，除了內容（該類稱爲「活動」）之外，相關選項卡切換爲「活動」。鏈接下拉菜單與引導中的標籤

這是控制標籤的boostrap.js。

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') 
    }

這裏是我的代碼（它工作正常顯示選項卡中的相關內容，但標籤導航沒有得到「積極」級切換：

<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>

然後我有我的標籤....

 <!-- 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>

這是relavent JavaScript調用：

<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>

來源

2013-08-22 erbsock

可以選項卡的元素是a（anchor）而不是內容。因此，點擊下拉菜單中的鏈接應激活tabbar錨點上的選項卡（）：

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

來源

2013-08-22 18:39:15

鏈接下拉菜單與引導中的標籤

回答

相關問題