弹出框中的Bootstrap选项卡无法正常工作

Question

当我在 Bootstrap 的 Popover 中使用 Bootstrap 的标签页时，似乎无法正常工作。

具体情况如下：

 1. Popover opens
 2. Active tab on click changes
 3. Tab content is not changing <-- PROBLEM

选项卡已正确创建，如果您在弹出窗口之外尝试它们，则可以正常使用。

<a class="btn" id="btnPopover" href="#">Launch Popover</a>
<div class="tabbable hide" id="popoverContent">
<ul class="nav nav-tabs">
    <li class="tab active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="tab"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li class="tab"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
    <div class="tab-pane active" id="tab1">Tab Content 1</div>
    <div class="tab-pane" id="tab2">Tab Content 2</div>
    <div class="tab-pane" id="tab3">Tab Content 3</div>
</div>

$(function () {
 $("#btnPopover").popover({
  html: true,
  trigger: 'click',
  title: "Title",
  placement: "bottom",
  content: $("#popoverContent").html()
 });
});

在这种情况下，Bootstrap似乎会复制元素。我打算在内容选项卡中使用更多的JavaScript库和插件，但这几乎是不可能的，除非有人提供一个可靠的解决方案。我真的认为这是一个有效的Bootstrap错误。

jsfiddle演示：http://jsfiddle.net/iboros/nCfBf/

- iboros

---

不是 Bootstrap 复制了元素。它将 content 选项记录为标记（或由函数生成的标记）。它不直接支持使用页面中已有的元素。您的代码通过使用现有的 DOM 元素，获取它们的 html 并提供给 Bootstrap 用于内容而复制了这些元素。解决方案非常简单：只需删除您要复制的元素（如 @PSL 所示）。 - T.J. Crowder

Answer 1

选项1：

删除现有的选项卡并获取其HTML内容。

$("#btnPopover").popover({
    html: true,
    trigger: 'click',
    title: "Title",
    placement: "bottom",
    content: $('#popoverContent').remove().html()
});

演示

选项2：

使用类选择器代替id选择器来选择标签页

例如

<a href=".tab2" data-toggle="tab">Tab 2</a>

替代

<a href="#tab2" data-toggle="tab">Tab 2</a>

Html

<div class="tabbable hide" id="popoverContent">
     <ul class="nav nav-tabs">
        <li class="active"><a href=".tab1" data-toggle="tab">Tab 1</a></li>
        <li class="tab"><a href=".tab2" data-toggle="tab">Tab 2</a></li>
        <li class="tab"><a href=".tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="padding-top: 15px">
        <div class="tab-pane active tab1" >Tab Content 1</div>
        <div class="tab-pane tab2">Tab Content 2</div>
        <div class="tab-pane tab3" >Tab Content 3</div>
    </div>
</div>
<a class="btn" id="btnPopover" href="#">Launch Popover</a>

Demo

- PSL

---

@iboros，这都是因为如果有重复的ID，BS仅仅只会选择第一个匹配的元素，所以在DOM中后出现的弹出框不会被选中。 - PSL

是的，你可以这样做，但是把元素留在DOM中似乎很不好。 - T.J. Crowder

@iboros：可能是因为该插件在DOM准备就绪时执行了某些操作，通过销毁和重新创建元素，该初始化操作并未完成。你真正想要的是一个选项，让弹出框使用现有的元素，而不是你提供HTML代码，但看起来popover并不支持这个选项。 - T.J. Crowder

所以一旦点击选项卡，我需要重新触发某些东西吗？ 哦，天啊，我想我会尝试使用模态框而不是弹出框，希望这不会太难了，呵呵。 - iboros

@iboros：是的，更重要的是 Popover 似乎没有提供任何类型的事件。 :-( 是的，转换为模式窗口可能更好，它实际上使用元素，而不是让你提供标记。 - T.J. Crowder