Question

我正在使用Flexy template（使用引导程序），我无法在选项卡上显示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 tab events基于.nav-tabs元素，而不是.tab-content元素。因此，为了利用show事件，您需要具有指向#tab1的href的元素，而不是#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);
})

Stack Snippets中的演示

$('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

问题更多是与rails相关的。

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

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

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

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

我面临的问题是我的页面上有两组标签。并且我已经将第一个标签集与

绑定在一起

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

对于第二个选项卡集，我也用相同的方式定义..但是我为ul分配了一个ID，并将click元素绑定为：

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

第一个选项卡在这里起作用，但是第二个选项卡不起作用。然后我弄清楚了，并为两个ul分配了ID。现在可以了

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

5 个答案:

Stack Snippets中的演示