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

Question

我正在使用嵌套选项卡为我的应用程序设计一个管理面板。这是选项卡设置方式的基本图表。

1. 最初活跃且可见

   -1a 初始活跃且可见

   -1b 无效

   -1c 无效

2. 不活跃

   -2a 初始活跃但不可见

   -2b 无效

   -2c 无效

2a 一开始是不可见的，因为它的 parent(2) 没有激活，但是 2a 确实有标签:

<li class='active'>

当我单击选项卡 2 时，选项卡 2a 似乎处于事件状态，但选项卡 Pane 是空的。查看页面源代码显示 2a 的选项卡 Pane 中有数据。为了看到它，我必须单击选项卡 2b，然后单击返回选项卡 2a。我的第一个想法是从 2a 中删除 .active。然后这要求用户单击 2a 以激活它，而不是先停用然后重新激活以显示内容。我想要发生的是在单击选项卡 2 时立即显示 2a。很抱歉解释很长。下面是代码，如果您更容易整理的话。

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

http://jsfiddle.net/vhFFf/

编辑:

这是一个有效的 fiddle ，它准确地显示了我要纠正的问题:

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

请务必将“结果” Pane 拖动得尽可能宽，以便按预期显示内容。当您单击最左侧菜单中的“用户”按钮时，不会显示最初事件的 Pane 内容。您必须单击“添加用户”或“垃圾箱”，然后单击返回“用户”才能看到该 Pane 的内容。

Answer 1

我认为当您切换到该选项卡时，您必须手动将事件类添加到 Pane 以使其处于事件状态<div class="tab-pane active" id="user">我给你更新了FIDDLE

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