[英]bootstrap 2.0 Activating tab and data by url within tab-content
I have seen numerous questions generally touching this subject, I know exactly what needs to be done but I'm not "fluent" with jQuery therefore, I cannot successfully do this. 我已经看到了许多通常涉及这个主题的问题,我确切地知道需要做什么,但我不能用jQuery“流利”,因此我不能成功地做到这一点。
<ul class="nav nav-pills" id="activate">
<li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li class="active"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1"><h1>Data for Tab 1</h2></div>
<div id="tab2">
<a href="#tab1" rel="taburl" data-toggle="tab">Take me to tab content #1</a>
</div>
Ideally, the data of that tab is switched to #tab1, however, the tab will not switch to active
class on the href="#tab1"
(stays active on #tab2
but displays the data from #tab1
) 理想情况下,该选项卡的数据切换到#tab1,但是,选项卡不会切换到
href="#tab1"
上的active
类(在#tab2
上保持活动状态,但显示#tab1
的数据)
I figured I could use the .first()
method and target the first occurrence of href="#tab1
and .addClass('active')
to this li. But I do not know how to select the li for anylink I link to it to directly target that href
ID 我想我可以使用
.first()
方法并将第一次出现的href="#tab1
和.addClass('active')
到这个li。但是我不知道如何为我链接到它的任何链接选择li直接定位该href
ID
I really do not know if this can be done. 我真的不知道这是否可以做到。 Can I inject the
href
data from the link (with jQuery) then add it to the tab link and make it active. 我可以从链接中注入
href
数据(使用jQuery),然后将其添加到选项卡链接并使其处于活动状态。
And again, the data-toggle="tab"
switches to the right content but will not update the active tab on the navbar, 再次,
data-toggle="tab"
切换到正确的内容,但不会更新导航栏上的活动选项卡,
so is there a way to select that exact 'tab' and .addClass('active')
to the <li>
once I've fired the link. 有没有办法在我解雇链接后选择确切的'tab'和
.addClass('active')
到<li>
。
Thank you for your time. 感谢您的时间。
http://jsfiddle.net/epiceon/M6NQJ/1/ http://jsfiddle.net/epiceon/M6NQJ/1/
If you switch between tabs like that you're going to need to call tab('show')
again on the tab you intend that button to go to. 如果您在标签之间切换,那么您需要再次在选项卡上调用
tab('show')
,您打算转到该按钮。
On a side note, you should consider updating your version to 2.0.3 if you're using tabs. 另外,如果您使用的是标签,则应考虑将版本更新为2.0.3。 They fixed a few bugs (mostly with tabs on the left or right) but even dropping in the new navs.less file might save you a headache down the road.
他们修复了一些错误(大多数是左侧或右侧的标签),但即使放入新的navs.less文件也可能会让您头疼不已。
I have encountered something similiar when trying to manually close a tab within itself. 尝试手动关闭其中的选项卡时,我遇到了类似的问题。
Heres the working jsFiddle: 继承人工作的jsFiddle:
http://jsfiddle.net/WnQvF/8/ http://jsfiddle.net/WnQvF/8/
Note that i just copypasted from my project. 请注意,我只是从我的项目中复制。 So the solution might not be the cleanest for your problem but you will get how it works.
因此,解决方案可能不是您的问题最干净,但您将了解它的工作原理。 Remember to name the Tab-Buttons and the Button within Tab 3.
请记住在Tab 3中命名Tab-Buttons和Button。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.