我正在为项目使用twitter bootstrap - 特别是它的tab功能(http://twitter.github.com/bootstrap/javascript.html#tabs)
现在我有了这个tablist,当我按下它时,它会切换到每个标签的内容.但是,此内容已预先加载到页面中(所有选项卡的内容的html代码已经存在,您只需按下选项卡即可更改可见性).
但是,我只想在按下某个选项卡时动态加载内容,因此在加载整个页面时,将获得最新数据而不是数据.
我打算为此使用jQuery.但是,如何在按下选项卡时调用某个jquery函数?
我试图在单击选项卡时显示警告(如果可行,jQuery函数也会),但即使这样也不起作用:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
$('.tabs').bind('click', function (e) {
e.target(window.alert("hello"))
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
而我的HTML:
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="tab1">
<h1>Tab1</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="tab2">
<h1>Tab2</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
有关如何使这项工作的任何想法?
请参阅twitter bootstrap选项卡的工作原理:(http://twitter.github.com/bootstrap/javascript.html#tabs)及其使用的js文件:http: //twitter.github.com/bootstrap/1.4. 0 /自举-tabs.js