javascript - Bootstrap tab ajax load content when page loaded - Stack Overflow

admin管理员组

文章数量:1310513

i need help about loading tab content when page is loaded. My example work good but default tab load content only when i click on him. That content is not loaded automatically when page is loaded is empty.

Check: Fiddle example

Like on example u will see you

<ul class="nav nav-tabs tabs-up" id="friends">
   <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
   <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
   <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>
<div class="tab-content">
   <div class="tab-pane active" id="contacts">
   </div>
   <div class="tab-pane" id="friends_list">
   </div>
   <div class="tab-pane  urlbox span8" id="awaiting_request">
   </div>
</div>

And js:

$('[data-toggle="tabajax"]').click(function(e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    $.get(loadurl, function(data) {
        $(targ).html(data);
    });

    $this.tab('show');
    return false;
});

i need help about loading tab content when page is loaded. My example work good but default tab load content only when i click on him. That content is not loaded automatically when page is loaded is empty.

Check: Fiddle example

Like on example u will see you

<ul class="nav nav-tabs tabs-up" id="friends">
   <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
   <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
   <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>
<div class="tab-content">
   <div class="tab-pane active" id="contacts">
   </div>
   <div class="tab-pane" id="friends_list">
   </div>
   <div class="tab-pane  urlbox span8" id="awaiting_request">
   </div>
</div>

And js:

$('[data-toggle="tabajax"]').click(function(e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    $.get(loadurl, function(data) {
        $(targ).html(data);
    });

    $this.tab('show');
    return false;
});

• javascript
• jquery
• ajax
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited May 2, 2016 at 16:36 Santosh Ram Kunjir 1,08211 gold badge1313 silver badges2323 bronze badges asked May 2, 2016 at 12:42 IvanIvan 5,2381313 gold badges5757 silver badges9494 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Place this at the very end of your script:

$(document).ready(function(){
    $('[data-toggle="tabajax"]:first').click();
});

that's it worked here is the plete js code:

<script type="text/javascript">
            $('[data-toggle="tab"]').click(function(e) {
                var $this = $(this),
                loadurl = $this.attr('href'),
                targ = $this.attr('data-target');

                $.get(loadurl, function(data) {
                $(targ).html(data);
                });

                $('[data-toggle="tab"]:eq(0)').trigger('click');

                $this.tab('show');
                return false;
            });


            $(document).ready(function(){
                $('[data-toggle="tab"]:first').click();
            });


       </script>

Thanks a lot

本文标签： javascriptBootstrap tab ajax load content when page loadedStack Overflow