Question

我正在尝试在标签激活时显示警告对话框，但它不起作用：

$('#myTab').on('shown', function (e) {
alert('test')
})

我不知道我做错了什么......

Answer 1

在Twitter Bootstrap中，有一个事件会在标签显示（show.bs.tab）上触发。给出以下标签：

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

...这是您可以使用的Javascript：

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

Answer 2

在bootstrap中，激活元素有active个类。您可以检查此课程而不是shown。这样的事可能适合你：

($('#myTab').hasClass('active'))

Answer 3

@alix是正确的，您需要在选项卡变为活动时调用初始化。我多次遇到这个问题，并在选项卡页面上实现此功能时忘记了这一事实。

Answer 4

首先，我可以在您的代码中看到没有错。所以导入库可能会有一些问题。无论如何，我想建议你在构建html / javascript应用程序时广泛使用的另一种方式。

我使用KnockoutJS来处理动态内容，事件和数据。这是一个非常棒的框架，让很多东西变得更容易。最近我使用这个twitter bootstrap，它使bootstrap更强大。

因为你要看看这个例子。您可以通过点击几下来了解这一点。 Knockout click binding

Twitter Bootstrap - 如何调用选项卡激活功能？

4 个答案: