Twitter引导标签和JavaScript事件
我正在使用twitter引导项目 – 特别是其选项卡function（ http://twitter.github.com/bootstrap/javascript.html#tabs ）
现在我有这个标签列表，当我按下标签时，它切换到每个标签的内容。 但是，这个内容是预先加载在页面中的（所有标签内容的html代码已经存在，你只需要按下标签来改变可见性）。
但是，我只想dynamic加载内容时，按下某个标签，所以当加载整个页面时，将获得最新的数据，而不是数据。
我正在计划使用jQuery。 然而，我怎么能这样做，当一个标签被按下某个jquery函数被调用？
我试图显示一个警告，当一个选项卡被点击（如果这样的作品，一个jQueryfunction也将），但即使这是行不通的：
<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> 和我的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>
任何想法如何使这项工作？
看到这个twitter引导标签的工作：（ http://twitter.github.com/bootstrap/javascript.html#tabs ）和它使用的js文件： http ： //twitter.github.com/bootstrap/1.4。 0 /自举-tabs.js
绑定似乎在DOM准备好之前运行。 另外，你的select器似乎被打破了，你只能在select的元素上绑定更改。 你必须通过点击和实现一些逻辑来解决问题。 尝试
$(function() { $('.tabs').bind('click', function (e) { e.target(window.alert("hello")) }); });
UPDATE
经过与文档的咨询，似乎你的代码只是缺lessDOM准备部分，其余的实际上并不是一个错误，这意味着根据文档，以下应该工作：
$(function() { $('.tabs').bind('change', function (e) { // e.target is the new active tab according to docs // so save the reference in case it's needed later on window.activeTab = e.target; // display the alert alert("hello"); // Load data etc }); });
造成混淆的原因是插件覆盖默认select器，使得#.tabs有效，并向tab元素添加更改事件。 去为什么他们决定这个语法是一个好主意。
无论如何，您可以尝试第二个样本，并在标签更改之前或之后发出警报。
编辑：修复由#.tabsselect器引起的jqueryexception
使用Twitter Bootstrap版本2 ，订阅选项卡更改事件的logging方式是
$('a[data-toggle="tab"]').on('shown', function (e) { e.target // activated tab e.relatedTarget // previous tab })
有关Twitter Bootstrap选项卡事件的最新文档可以在http://getbootstrap.com/javascript/#tabsfind
如果您使用的是2.3.2而且无法正常工作，请尝试使用：
$(document).on("shown", 'a[data-toggle="tab"]', function (e) { console.log('showing tab ' + e.target); // Active Tab console.log('showing tab ' + e.relatedTarget); // Previous Tab });
2.3.2选项卡的用法： http : //getbootstrap.com/2.3.2/javascript.html#tabs
如果你玩的是版本3（目前是RC2），那么文档会显示
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { console.log('showing tab ' + e.target); // Active Tab console.log('showing tab ' + e.relatedTarget); // Previous Tab })
RC2标签用法： http : //getbootstrap.com/javascript/#tabs-usage
您可以在bootstrap 3中使用以下代码片段
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { var activatedTab = e.target; // activated tab })
如何使用点击？ 喜欢这个：
$('#.tabs').click(function (e) { e.target(window.alert("hello")) })
您在与select器相关的语法中遇到错误：
$('#.tabs') // should be ... $('.tabs');
无序列表在您的HTML中有一个名为“tabs”的类 ，而您最初试图select一个ID为 “.tabs”的元素。
而且你也必须考虑到manticore的build议。 您只能在表单元素上使用“更改”。
$(document).ready(function() { $('.tabs').click(function(e) { e.preventDefault(); alert('tab clicked!'); }); });
文档说：使用事件show 。
