javascript - How to load Bootstrap tab panel with tab click? - Stack Overflow

admin管理员组

文章数量:1201993

I'm using Bootstrap tab panels on the site like that:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>
  <li role="presentation"><a href="#chartcontainer2" aria-controls="chartcontainer2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="chartcontainer1">
      <div id="layeredcolumnchart"></div>
  </div>
  <div role="tabpanel" class="tab-pane" id="chartcontainer2">
      <div id="piechart"></div>
  </div>
</div>

What I want to do is to load the non active panels on tab click.

(Now, it loads every panels on page load.)

Note: Show-hide is not a solution for me and what I want to show is not an external URL. It's a div (included some JS) from the current page.

I'm using Bootstrap tab panels on the site like that:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>
  <li role="presentation"><a href="#chartcontainer2" aria-controls="chartcontainer2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="chartcontainer1">
      <div id="layeredcolumnchart"></div>
  </div>
  <div role="tabpanel" class="tab-pane" id="chartcontainer2">
      <div id="piechart"></div>
  </div>
</div>

What I want to do is to load the non active panels on tab click.

(Now, it loads every panels on page load.)

Note: Show-hide is not a solution for me and what I want to show is not an external URL. It's a div (included some JS) from the current page.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Nov 7, 2016 at 15:12 herci asked Nov 4, 2016 at 7:17 herciherci 38511 gold badge44 silver badges2424 bronze badges 10

• Make the them hidden and onlick= show – Mihai Commented Nov 4, 2016 at 7:18
• 1 @Mihai, I don't want to hide-show, I want to load on click because I want to see an animation on load. I can see the animation on default active tab, but I couldn't see the animation on other panels because they loaded before I visit them: on page load. – herci Commented Nov 4, 2016 at 7:20
• can you please create a working snippet or fiddle for this? – vijayP Commented Nov 4, 2016 at 7:27
• 1 So, loading graphic (a spinner, say) should be displayed when loading a page, otherwise keep loaded data, or refresh the data on the tab click? – Malovich Commented Nov 10, 2016 at 14:08
• 1 ...and now the kicker. You mentioned an on page div in a few places. Is this a static sheet of data sitting there waiting to be loaded into the tab, or did you have something else in mind? – Malovich Commented Nov 10, 2016 at 14:21

 |  Show 5 more comments

4 Answers 4

Sorted by: Reset to default 9

If you wish to load the tab panel content on click of the tab, you have to use Ajax for same.

Here is an example.

HTML Code

<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>

Javascript Code

$('[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;
});

Click here to view the Demo on JSFiddle:-

I think you need to use tab events to (re)load divs inside the tab-content.

For example:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  if (e.target=='#chartcontainer1') {
    $('#layeredcolumnchart').html('YOUR HTML/JAVASCRIPT/ETC HERE');
    // If you need to load jQuery plugins like charts, you need to load 
    // it here each time you display the tab-content
    // $('#layeyedcolumnchart .somediv').somePlugin();
  }
})

Look at the Events section on http://getbootstrap.com/javascript/#tabs

I think that you are looking for a load animation with css, not an actual load of information.

Just by adding the classes fade in to your active tabpanel (your #chartcontainer1) and fade to the other tabpanel you will active this effect.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="chartcontainer1"><!-- Notice the "fade in" classes -->
      <div id="layeredcolumnchart">...</div>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="chartcontainer2"> <!-- Notice the face class -->
      <div id="piechart">...</div>
  </div>
</div>

My JSFiddle Example

So, after doing a bit of a requirements process, I think I may have a solution.

You need to blow out the content when on a tab, then load the chart app to get the animation.

<li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  if (e.target=='#chartcontainer1') {
     $('#chartcontainer1').html('');
     makeChartOne();
  }
})

function makeChartOne(){
  var chart = AmCharts.makeChart( "#chartcontainer1", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "country": "Lithuania",
    "litres": 501.9
  }, {
    "country": "Czech Republic",
    "litres": 301.9
  }, {
    "country": "Ireland",
    "litres": 201.1
  }, {
    "country": "Germany",
    "litres": 165.8
  }, {
    "country": "Australia",
    "litres": 139.9
  }, {
    "country": "Austria",
    "litres": 128.3
  }, {
    "country": "UK",
    "litres": 99
  }, {
    "country": "Belgium",
    "litres": 60
  }, {
    "country": "The Netherlands",
    "litres": 50
  } ],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );
}

本文标签： javascriptHow to load Bootstrap tab panel with tab clickStack Overflow