jquery - bootstrap 2.0 通过选项卡内容中的 url 激活选项卡和数据

标签 jquery html css twitter-bootstrap

我见过很多涉及这个主题的问题,我确切地知道需要做什么,但我对 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>

理想情况下,该选项卡的数据会切换到#tab1,但是,该选项卡不会切换到 active href="#tab1" 上的类(class)(在 #tab2 上保持事件状态,但显示来自 #tab1 的数据)

我想我可以使用 .first()方法和目标第一次出现 href="#tab1.addClass('active')至此里。但我不知道如何为我链接到的任何链接选择 li 以直接定位 href身份证号

我真的不知道这是否可以做到。我可以注入(inject)href来自链接的数据(使用 jQuery)然后将其添加到选项卡链接并使其处于事件状态。

再说一次,data-toggle="tab"切换到正确的内容,但不会更新导航栏上的事件选项卡,

有没有办法选择确切的“选项卡”和 .addClass('active')<li>一旦我触发了链接。

感谢您的宝贵时间。

JSFIDDLE 示例

http://jsfiddle.net/epiceon/M6NQJ/1/

最佳答案

如果您在这样的选项卡之间切换,则需要在您想要该按钮转到的选项卡上再次调用 tab('show')

顺便说一句,如果您使用选项卡,您应该考虑将版本更新到 2.0.3。他们修复了一些错误(主要是左侧或右侧的选项卡),但即使放入新的 navs.less 文件也可能会为您省去一些麻烦。

关于jquery - bootstrap 2.0 通过选项卡内容中的 url 激活选项卡和数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10406297/

相关文章:

javascript - 如何在HTML程序中隐藏图像?

jQuery 选择选项列表在 IE6 中更新得不够快

css - 1px 间隙在 CSS 网格中不一致

javascript - jQuery UI Portlet 问题(无法单击输入框)

javascript - 如何不在函数中重写所有这些值?

Javascript 项目总和

html - Firefox15.0.1 设计不兼容问题

css - myFlowPanel 有很多 childFlowPanels,那么如何在不使用 childFlowPanels (GWT) 上的 marginTop 的情况下为所有 childFlowPanels 创建相同的边距?

javascript - 如何将html页面导出到ms.带有外部 CSS 的单词 (.doc)?

java - 用java编辑html/网页