在 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/
最佳答案
选项 1:
删除现有选项卡并获取其 HTML 内容。
$("#btnPopover").popover({
html: true,
trigger: 'click',
title: "Title",
placement: "bottom",
content: $('#popoverContent').remove().html()
});
Demo
选项 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
关于javascript - Popover 中的 Bootstrap Tab 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16869455/