我正在使用嵌套选项卡为我的应用程序设计一个管理面板。以下是选项卡设置方式的基本图表。
最初活跃且可见
-1a 最初活跃且可见
-1b 不活动
-1c 不活动
不活动
-2a 最初处于事件状态但不可见
-2b 不活动
-2c 不活动
2a 起初不可见,因为它的父级 (2) 不活动,但 2a 确实有标签:
<li class='active'>
当我单击选项卡 2 时,选项卡 2a 似乎处于事件状态,但选项卡 Pane 为空。查看页面源显示选项卡 Pane 中有 2a 的数据。为了查看它,我必须单击选项卡 2b,然后单击返回选项卡 2a。我的第一个想法是从 2a 中删除 .active。然后,这需要用户单击 2a 来激活它,而不是取消激活然后重新激活以显示内容。我想要发生的是当单击选项卡 2 时 2a 立即可见。抱歉这么长的解释。下面是代码,如果您更容易排序的话。
我将 HTML 代码放在这个 jsfiddle 中,因为它太长,无法包含在帖子中。
编辑:
这是一个工作 fiddle ,它准确地显示了我试图纠正的问题:
http://jsfiddle.net/52VtD/4862/
请务必将结果 Pane 拖得尽可能宽,以便内容按预期显示。当您单击最左侧菜单中的“用户”按钮时,不会显示最初事件的 Pane 内容。您必须单击“添加用户”或“垃圾箱”,然后单击返回“用户”才能查看该 Pane 内容。
最佳答案
我认为您必须手动将事件类添加到 Pane 中,以使其在切换到该选项卡时处于事件状态 <div class="tab-pane active" id="user">
我更新了你FIDDLE
这是我能想到的最简单的解决方案,希望它有所帮助。
关于javascript - Bootstrap 嵌套选项卡在重新选择之前不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23255341/