链接下拉菜单，其中包含引导程序中的选项卡 [英] Link dropdown menu with tabs in bootstrap
本文介绍了链接下拉菜单，其中包含引导程序中的选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在将下拉菜单与标签链接时遇到问题。我想要的是，当使用选项卡并通过Bootstrap 3中的下拉列表或选项卡导航选择内容时，相关选项卡除了内容（该类称为活动）之外还要切换为活动 。
i'm having a problem linking my dropdown menu with tabs. What i'd like is for the relevant tab to toggle to be "active" in addition to the content (the class is called "active") when using tabs and getting the content select by either the dropdown or the tab navigation in Bootstrap 3.
这是控制标签的boostrap.js。
This is the boostrap.js that controls the tabs.
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')
}
这是我的代码（显示效果很好）选项卡中的相关内容，但是标签导航没有得到活动类切换：
Here's my code (it works fine to display the relevant content in the tab, but the tab navigation doesn't get the "active" class toggled:
<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 & 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 & 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 & Radiation Therapy</a></li>
<li><a href="#fat_and_cellulite" id="fat_and_cellulite_li">Fat & Cellulite Reduction</a></li>
<li><a href="#vascular" id="vascular_li">Rosacea, Angiomas & 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>
然后我有我的标签....
I then have my tabs....
<!-- 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 & 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 & 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>
这是相关的javascript通话：
This is the relavent javascript call:
<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>
推荐答案
可以选项卡的元素是a（锚点） ）不是内容。因此，单击下拉列表中的链接应激活tabbar锚点上的tab（）：
The element which can be tabbed is the a (anchor) not the content. So click a link in your dropdown should active the tab() on a anchor of your tabbar:
$('#treatment_dropdown a').click(function (e) {
e.preventDefault()
$($(this).attr('href')+'_tt').tab('show')
})
这篇关于链接下拉菜单，其中包含引导程序中的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
