javascript - Twitter 引导选项卡和 javascript 事件

Question

我正在为一个项目使用 twitter 引导程序 - 特别是它的选项卡功能（http://twitter.github.com/bootstrap/javascript.html#tabs）

现在我有了这个选项卡列表，当我按下选项卡时，它会切换到每个单独选项卡的内容。但是，此内容是在页面中预加载的（所有选项卡内容的 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>

还有我的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/bootstrap-tabs.js

score 73 · Accepted Answer

使用 Twitter Bootstrap 版本 2 ，订阅选项卡更改事件的记录方式是

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

可以在http://getbootstrap.com/javascript/#tabs找到有关 Twitter Bootstrap 选项卡事件的最新文档

score 19 · Accepted Answer

如果您使用的是 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

score 14 · Accepted Answer

绑定似乎在 DOM 准备好之前运行。此外，您的选择器似乎已损坏，您只能在选择元素上绑定更改。您必须通过单击并实现一些逻辑来解决问题。尝试

$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});

更新

在查阅文档后，您的代码似乎只缺少 DOM 就绪部分，其余部分实际上并不是错误，这意味着根据文档，以下内容应该可以工作：

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

引起混乱的是插件覆盖了默认选择器，使其#.tabs有效并且还向选项卡元素添加了更改事件。弄清楚为什么他们认为这种语法是个好主意。

无论如何，您可以尝试第二个示例并评论警报是否在选项卡更改之前或之后触发。

#.tabs编辑：修复了由选择器引起的 jquery 异常

score 4 · Accepted Answer

您可以在引导程序 3 中使用以下代码片段

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   var activatedTab = e.target; // activated tab
})

score 0 · Accepted Answer

如何使用点击？像这样：

$('#.tabs').click(function (e) {
  e.target(window.alert("hello"))
})

score 0 · Accepted Answer

您在与选择器相关的语法中有错误：

$('#.tabs') // should be ...
$('.tabs');

无序列表在您的 HTML 中有一个名为“tabs”的类，而您最初试图选择一个id为“.tabs”的元素。

你也必须考虑 manticore 的建议。您只能在表单元素上使用“更改”。

$(document).ready(function() {
    $('.tabs').click(function(e) {
        e.preventDefault();
        alert('tab clicked!');
    });
});

score 0 · Accepted Answer

0

文档说：使用 event show。

于 2012-02-16T23:50:40.073 回答

javascript - Twitter 引导选项卡和 javascript 事件

7 回答 7

Related