Bootstrap嵌套选项卡在重新选择之前不会显示

时间:2014-04-23 21:17:17

标签: javascript jquery html twitter-bootstrap

我正在使用嵌套标签为我的应用程序设计管理面板。以下是如何设置选项卡的基本图表。

  1. 最初活跃且可见

    -1a最初活跃且可见

    -1b无效

    -1c无效

  2. 无效

    -2a最初有效但不可见

    -2b无效

    -2c无效

  3. 2a最初不可见,因为它的父(2)不是活动的,但2a确实有标签:

    <li class='active'>
    

    当我单击选项卡2时,选项卡2a似乎处于活动状态,但选项卡窗格为空。查看页面源代码显示2a的选项卡窗格中有数据。为了看到它,我必须单击选项卡2b,然后单击返回选项卡2a。我的第一个想法是从2a中删除.active。然后,这要求用户点击2a以激活它而不是去激活然后重新激活以显示内容。我想要发生的是当点击标签2时2a立即可见。很抱歉很长的解释。下面是代码,如果您更容易排序。

    我将HTML代码放在此jsfiddle中,因为它太长而无法包含在帖子中。

    http://jsfiddle.net/vhFFf/

    编辑:

    这是一个工作小提琴,可以准确地显示我想要纠正的问题:

    http://jsfiddle.net/52VtD/4862/

    请务必将“结果”窗格拖动到尽可能宽的位置,以便内容按预期显示。当您点击&#34;用户&#34;在最左侧菜单中的按钮,不显示最初活动的窗格内容。您必须单击&#34;添加用户&#34;或&#34;垃圾&#34;然后点击返回&#34;用户&#34;看到窗格的内容。

1 个答案:

答案 0 :(得分:2)

我认为您必须手动将活动类添加到窗格,以便在切换到该标签时激活它<div class="tab-pane active" id="user">我更新了您FIDDLE

这是我能想到的最简单的解决方案,希望它有所帮助。