bootstrap shown.bs.tab事件无法正常工作

Question

我正在使用Flexy模板(使用引导程序),我无法在选项卡上显示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>

我能错过什么？如果我在Flexy代码上复制/粘贴此代码,则无效.了解错误的步骤是什么？谢谢 !

Answer 1

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

所以不是这样的:

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

改为:

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

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

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

堆栈片段中的演示

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  alert(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

如果Tab是动态的,请尝试使用

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

        alert(e.target.href);
    })

Answer 3

就我而言，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 4

这个问题更多的是与 Rails 有关的问题。

我最终一一删除了每一段代码，因为问题并不存在于原始模板中，正如 @KyleMit 所说。

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

问题是我需要bootstrap和bootstrap-sprockets。我应该只需要其中之一，而不是两者都需要。