Bootstrap shown.bs.tab 活动无效

Question

我正在使用 Flexy template（使用 bootstrap），但无法使选项卡上的 shown.bs.tab 事件正常工作。

我已经设法让它在 JSFiddle 上运行。

这是我在模板中使用的代码，没有产生任何结果：

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="chart1">Tab 1 Content</div>
    <div class="tab-pane" id="chart2">Tabe 2 Content</div>
  </div>
</div>

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

我能错过什么？如果我 copy/paste Flexy 代码上的此代码不起作用。了解错误的步骤是什么？谢谢！

Answer 1

Bootstrap tab events 基于 .nav-tabs 元素，而不是 .tab-content 元素。因此，为了利用 show 事件，您需要具有指向 #tab1 的 href 的元素，而不是 #tab1 内容元素本身。

所以不是这个：

$('#tab1').on('shown.bs.tab', function (e) {
    console.log("tab1");
});

改为这样做：

$('[href=#tab1]').on('shown.bs.tab', function (e) {
    console.log("tab1");
});

或者，要捕获所有这些，只需执行以下操作：

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

堆栈片段中的演示

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

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="chart1">Tab 1 Content</div>
    <div class="tab-pane" id="chart2">Tabe 2 Content</div>
  </div>
</div>

Answer 2

问题更多 一个 rails 相关。

我最终将每一段代码都一一删除，因为@KyleMit 说原始模板中没有问题。

每当我从 application.js 文件中删除行 //= require bootstrap-sprockets 时，问题就会消失！

问题是我同时需要 bootstrap 和 bootstrap-sprockets。我应该只需要其中一个，但 不需要两个。

Answer 3

如果标签无论如何都是动态的，请尝试使用

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

Answer 4

就我而言，Jquery 和 Bootstrap 之间存在冲突。

我用 jQuery.noConflict() 解决了这个问题。见下文！

希望对您有所帮助！

// Issue @ tabs toggle 
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert(e.target.href);
});

Answer 5

我面临的问题是我的页面上有 2 组选项卡。我已经用

绑定了第一个标签集

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

对于第二个选项卡集，我也以相同的方式定义了..但是我已经为 ul 分配了一个 id 并将点击元素绑定为：

  $('#tabId > li > a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      console.log(e.target.href);
    })

第一个选项卡在这里工作，但第二个选项卡不起作用。然后我想通了并将 id 分配给两个 uls.. 现在可以工作了

Answer 6

试试这个，很简单，只听你需要的标签:

$('a[href="#idTab"]').on('shown.bs.tab', function (e) {
 `console.log('this tab is shown');`//or do something else
}

Bootstrap shown.bs.tab 活动无效

Bootstrap shown.bs.tab event not working

javascript

jquery

ruby-on-rails

twitter-bootstrap

bootstrap-sass

堆栈片段中的演示