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>

我想要做的是在标签页上点击加载非活动面板。

（现在，它会在页面加载时加载每个面板。）

注意：Show-hide不是我的解决方案，我想要显示的不是外部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;
});

Click here在JSFiddle上查看演示： -

Answer 2

我认为您需要使用制表符事件（重新）在制表符内容中加载div。

例如：

var Mocha = require('mocha'),
    fs = require('fs'),
    path = require('path'),
    open = require('open');

var mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'report',
      reportName: 'report',
    }
});

var testDir = './tests'

fs.readdirSync(testDir).forEach(function(file){
    mocha.addFile(
        path.join(testDir, file)
    );
});

mocha.run(function(failures){

  open(__dirname + '/report/report.html', 'chrome');

  process.on('exit', function () {
    process.exit(failures);
  });
});

查看http://getbootstrap.com/javascript/#tabs

上的事件部分

Answer 3

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

只需将课程fade in添加到您的有效tabpanel（您的#chartcontainer1）和fade添加到另一个tabpanel，您就会激活此效果。< / p>

<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

Answer 4

因此，在完成一些需求流程之后，我想我可能有一个解决方案。

您需要在选项卡上展示内容，然后加载图表应用以获取动画。

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

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

4 个答案: