twitter-bootstrap 如何通过单击选项卡加载 Bootstrap 选项卡面板？

How to load Bootstrap tab panel with tab click?

提问by herci

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

我在网站上使用 Bootstrap 选项卡面板，如下所示：

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

注意：Show-hide 不是我的解决方案，我想显示的不是外部 URL。它是当前页面的一个 div（包括一些 JS）。

回答by Samay

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

如果您希望在单击选项卡时加载选项卡面板内容，则必须使用 Ajax。

Here is an example.

这是一个例子。

HTML Code

HTML代码

<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

Javascript代码

$('[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 hereto view the Demo on JSFiddle:-

单击此处查看 JSFiddle 上的演示：-

回答by vegadavid

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

我认为您需要使用选项卡事件来（重新）加载选项卡内容中的 div。

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

查看http://getbootstrap.com/javascript/#tabs上的“事件”部分

回答by xWaZzo

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

我认为您正在寻找load animation带有 css 的文件，而不是实际的信息负载。

Just by adding the classes fade into your active tabpanel(your #chartcontainer1) and fadeto the other tabpanelyou will active this effect.

只需将类添加fade in到您的活动tabpanel（您的#chartcontainer1）和fade另一个tabpanel您将激活此效果。

<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

我的 JSFiddle 示例

回答by Malovich

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
  }
} );
}