Question

我有一个问题，我想将标签放入popover，但如果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>

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

Bootstrap 3 Togglable Tabs进入popover无法正常工作

1 个答案: