Question

我有一个引导选项卡，可以使用分页加载其中的动态页面内容。我正在使用codigniter框架。流动的jquery可以在特定的选项卡中正常加载内容，但是我在firebug中注意到，每当我切换到另一个选项卡然后返回到前一个选项卡时，它再次加载选项卡内容。

如何在单击时阻止加载上一个标签再次加载。

这是我的页面..

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTabs">    
        <li id="home"><a href="#home"  class="active" data-toggle="tab" id="page">Home</a></li>
        <li id="foo"><a href="#get_all_division" data-toggle="tab" id="page">Foo</a></li>
        <li id="bar"><a href="#get_all_district" data-toggle="tab" id="page">Bar</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="get_all_division"></div>
        <div class="tab-pane" id="get_all_district"></div>
    </div>
</div>

<script>
    $(function() {
        var baseURL = 'http://allinfo/area/';
        //load content for first tab and initialize
            $('#get_all_division').load(baseURL+'get_all_division', function() {
                $('#myTabs').tab(); //initialize tabs
            }); 

        $('#get_all_division').on('click', 'a.page', function() {
            $('#get_all_division').load($(this).attr('href'));
        return false;

        });

            $('#get_all_district').load(baseURL+'get_all_district', function() {
                $('#myTabs').tab(); //initialize tabs
            }); 


        $('#get_all_district').on('click', 'a.page', function() {
            $('#get_all_district').load($(this).attr('href'));
        return false;
        });

        $('#myTabs').bind('show', function(e) {    
           var pattern=/#.+/gi //use regex to get anchor(==selector)
           var contentID = e.target.toString().match(pattern)[0]; //get anchor         
           //load content for selected tab
            $(contentID).load(baseURL+contentID.replace('#',''), function(){
                $('#myTabs').tab(); //reinitialize tabs
            });
        });
    });
</script>

Answer 1

一旦使用回调隐藏选项卡，或者单击其他选项卡，您可以使用.empty（）删除加载的内容

$('#get_all_district').load(baseURL+'get_all_district', function() {
            $('#get_all_division').empty();
            $('#myTabs').tab(); //initialize tabs
 });

防止在引导选项卡中加载动态内容两次

1 个答案: