如何加载Bootstrap选项卡面板并单击选项卡？

Question

我在网站上使用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>

我想要做的是在选项卡点击上加载非活动面板.

(现在,它会在页面加载时加载每个面板.)

注意:显示隐藏不是我的解决方案,我想要显示的不是外部URL.它是当前页面中的div(包括一些JS).

Answer 1

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

这是一个例子.

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

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

点击这里查看JSFiddle上的演示: -

Answer 2

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

例如：

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

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