Question

当引导程序3选项卡/导航栏的选项卡更改以及字面上所有建议谷歌吐出错误/不起作用时，我花费了不切实际的时间尝试触发函数。

如何解决这个问题？

元编辑：见评论

Answer 1

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    home tab!
  </div>
  <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>

＆＃13;

Answer 2

$(function () {
    $('#myTab a:last').tab('show');
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href");
    if ((target == '#messages')) {
        alert('ok');
    } else {
        alert('not ok');
    }
});

问题是attr（'href'）永远不会为空。

或者比较#id =“＃some value”然后调用ajax。

Answer 3

感谢@ Gerben的帖子后来了解有两个事件show.bs.tab（显示选项卡之前）和shown.bs.tab（显示选项卡之后），如文档中所述 - Bootstrap Tab usage

如果我们只对特定标签感兴趣，并且可能添加单独的函数而不必在一个函数中添加if - else块，则使用a href选择器（可能还有其他选择器）如果需要）

 $("a[href='#tab_target_id']").on('shown.bs.tab', function(e) {
      console.log('shown - after the tab has been shown');
 });

 // or even this one if we want the earlier event
 $("a[href='#tab_target_id']").on('show.bs.tab', function(e) {
      console.log('show - before the new tab has been shown');
 });

demo

Answer 4

要添加到Mosh Feu的答案，如果在我的情况下在运行中创建的选项卡，您将使用以下代码

const_iterator

我希望这有助于某人

Answer 5

这对我有用。

$('.nav-pills > li > a').click( function() {
    $('.nav-pills > li.active').removeClass('active');
    $(this).parent().addClass('active');
} );

Answer 6

我使用另一种方法。

只需尝试查找所有const Obj = { "0":"Masaccio, Sandro Botticelli, 'Leonardo, da, Vinci'", "1":"Random, Thing, Uploaded", "2":"String, Second String, Third string", "3":"Chef, Police, Cat", "4":"Legen, Jerry, Jack", }; const result = Object.values(Obj).reduce((a, str) => { const items = str.match(/\w[\w\s]+(?=, |$)|'[^']+'/g); items.forEach((item, i) => { if (!a[i]) a[i] = []; a[i].push(item); }); return a; }, []); console.log(result);，其中a从某个 substring 开始。

JS

id

HTML

$('a[id^=v-photos-tab]').click(function () {
     alert("Handler for .click() called.");
});

用于活动标签更改的Bootstrap 3 jquery事件

6 个答案: