将下拉菜单与引导程序中的选项卡链接
Link dropdown menu with tabs in bootstrap
我在将下拉菜单与选项卡链接时遇到问题。我想要的是,当使用选项卡并通过Bootstrap 3中的下拉菜单或选项卡导航选择内容时,除了内容(类被称为"活动")之外,相关选项卡还可以切换为"活动的"。
这是控制选项卡的boosrap.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 & 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>
然后我有我的标签。。。。
<!-- 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>
这是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>
可以选项卡显示的元素是a(锚点),而不是内容。因此,点击下拉列表中的链接应该会激活选项卡锚上的选项卡():
$('#treatment_dropdown a').click(function (e) {
e.preventDefault()
$($(this).attr('href')+'_tt').tab('show')
})
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 在新选项卡中打开链接,但不使用_blank方法
- 打开选项卡中的链接
- JQuery-停止手风琴链接关闭所有选项卡
- 文本链接可更改引导程序选项卡
- <中的链接;选择>下拉选项
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 如何在新选项卡中打开链接以及在当前选项卡中重定向
- 表单上预先选择的选项取决于您的链接'We’’’’来自
- 如何超链接在新选项卡中打开并携带一些变量的选择标记
- 如何防止iframe中的链接在新选项卡中打开
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 打开除域之外在新选项卡中打开的所有外部链接
- 单击链接时添加另一个选项
- 如何使用角度材质应用选项卡链接波纹
- 谷歌地图点击链接/选项卡更改标记位置地图
- 如何在分页期间链接回特定的jquery ui选项卡
- 选项卡中的a href链接没有执行任何操作
- 提交表单的可能性(左-/中-/在新选项卡或窗口中打开-)单击html链接