我正在使用twitter-bootstrap导航栏和标签一起通过ajax加载表单(我使用Django来提供表单)
<ul class="nav nav-pills" id="tabs">
<li><a href="#form1" data-toggle="tab">Form1</a></li>
<li><a href="#form2" data-toggle="tab">Form2</a></li>
<li><a href="#form3" data-toggle="tab">Form3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="form1" data-src="{% url form1 %}"></div>
<div class="tab-pane" id="form2" data-src="{% url form2 %}"></div>
<div class="tab-pane" id="form3" data-src="{% url form3 %}"></div>
</div>
这与jquery结合在一起:
$('#tabs').bind('show', function(element) {
paneID = $(element.target).attr('href');
src = $(paneID).attr('data-src');
$(paneID).load(src);
});
首先,我想知道这可能是一个坏主意。我想不出有什么原因,但是如果有人可以向我指出这种方法是否有任何缺点我会很感激。
其次,当我离开选项卡时,我想触发该选项卡内容的“onunload”事件。但是当我离开时,我似乎找不到从标签中“卸载”数据的方法。
$('#tabs').bind('hide', function(element) {
doStuff();
});
显然无效。任何帮助/指导表示赞赏。
答案 0 :(得分:2)
Bootstrap选项卡将触发事件。
http://getbootstrap.com/2.3.2/javascript.html#tabs
取自bootstrap:
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
您可以使用relatedTarget。这就是“卸载”的标签。