Bootstrap 3 个可切换到弹出窗口的选项卡无法工作

Question

我有一个问题，我想将标签放入弹出窗口，但是如果标签放入弹出窗口，它可以工作，我不知道如何解决这个问题，我该怎么办？请给我一些建议，谢谢。

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>

Answer 1

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

因此，所有 tabs/tab-panes 的 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
        }
    });
})();

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

<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。这不是错误。

Bootstrap 3 个可切换到弹出窗口的选项卡无法工作

Bootstrap 3 Togglable Tabs into popover can't working

jquery

twitter-bootstrap

tabs

popover