我在网站上使用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>
我想要做的是在选项卡点击上加载非活动面板.
(现在,它会在页面加载时加载每个面板.)
解决方法
如果您希望在单击选项卡时加载选项卡面板内容,则必须使用Ajax.
这是一个例子.
<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上查看演示： –
