Bootstrap 3 Togglable Tabs into popover 无法正常工作答案

【问题标题】：Bootstrap 3 Togglable Tabs into popover can't workingBootstrap 3 Togglable Tabs into popover 无法正常工作
【发布时间】：2015-01-13 04:21:35
【问题描述】：

我有一个问题，我想把tabs放到popover里面，但是如果tabs在popover里面就可以了，我不知道怎么解决这个问题，我该怎么办？请给我一些建议，谢谢。

jquery 代码

$(function(){
    $('.serviceCabin').popover({
        'html': true,
        'content': function () {
            return $('#popover-content').html();
        }
    }); 

});

$(function(){

    $('[data-toggle=tab]').click(function(e){
        e.preventDefault();
          if ($(this).parent().hasClass('active')){
            $($(this).attr("href")).toggleClass('active');
          }
        });
});

html代码

<html>
<body>
<input type="text" class="serviceCabin" data-container="body" data-toggle="popover" data-placement="bottom" >   

</input>    
    <div id="popover-content" class="hide">

        <div role="tabpanel">
               <ul class="nav nav-tabs" role="tablist" id="myTab">
                    <li class="active"><a href="#city" data-toggle="tab">city</a></li>
                    <li ><a href="#station" data-toggle="tab">station</a></li>
                    <li ><a href="#airport" data-toggle="tab">airport</a></li>
               </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="city">
                           <span>city 1</span>         
                    </div>
                    <div class="tab-pane " id="station">                        
                            <span>station 1</span>                          
                    </div>  
                    <div class="tab-pane " id="airport">                        
                            <span>airport 1</span>                          
                    </div>                      
                </div>  
        </div>                                                                                  
 </div>
</body>
</html>

【问题讨论】：

标签： jquery twitter-bootstrap tabs popover

【解决方案1】：

问题在于.popover() 方法复制了#popover-content 元素。

因此，所有选项卡/选项卡窗格中的 id 都是重复的。在弹出窗口中的选项卡之间切换时，您实际上只是在原始隐藏的 #popover-content 元素中切换选项卡。

为了解决这个问题，您可以删除重复的原始元素。

在本例中为$('#popover-content').remove()。

Example Here

(function () {
    var tabContent = $('#popover-content').html();    // Cache the HTML
    $('.serviceCabin').popover({
        'html': true,
        'content': function () {
            $('#popover-content').remove();           // Remove the element
            return tabContent;                        // Return the cached HTML
        }
    });
})();

另外，另一种解决方案是使用类而不是 id 的 .tab-pane 元素。

<li><a href=".station" data-toggle="tab">station</a>

<div class="tab-pane station"><span>station 1</span>

Example Here

对于它的价值，this has been brought up a few times on the BS3 github repo。这不是错误。

【讨论】：

感谢您的回答，所以如果我想在popover中使用两个或更多功能，我应该删除原始元素。