0

pagination を使用してその中に動的なページコンテンツをロードするブートストラップタブがあります。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