0

我有一个引导选项卡，它通过分页在其中加载动态页面内容。我正在使用 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>
4

1 回答 1

0

一旦使用回调隐藏选项卡或单击另一个选项卡时，您可以使用 .empty() 删除加载的内容

$('#get_all_district').load(baseURL+'get_all_district', function() {
            $('#get_all_division').empty();
            $('#myTabs').tab(); //initialize tabs
 });
于 2013-09-25T09:36:52.703 回答