Bootstrap 'shown.bs.tab' 事件未在以编程方式显示选项卡时触发（使用 tab('show')）

Question

这是我的html：

<div class="profile_nav_tabs" id="profile_nav_tabs">
  <ul class="profile-tabs">
    <li>
      <a data-toggle="tab" href="#tab1">Tab 1</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2">Tab 2</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab3">Tab 3</a>
    </li>
  </ul>
</div>


<div class="tab-content">
   <div class="tab-pane" id="tab1">Tab1</div>
   <div class="tab-pane" id="tab2">Tab2</div>
   <div class="tab-pane" id="tab3">Tab3</div>
</div>

这是我的 Javascript：

(function(){
  var hash = window.location.hash;
  if(hash){
    $("#profile_nav_tabs " + "a[href=" + hash + "]").tab('show');
  }

  $('#profile_nav_tabs a').on('shown.bs.tab', function(event){
    window.location.hash = event.target.hash;
    alert("hello");
    // some ajax call
  })
})();

现在，如果我刷新页面，网址为local.dev/users/profile/#tab1，tab1 内容会出现，但shown.bs.tab 事件不会触发。也就是说，既不显示警报，也不进行 ajax 调用。

只有当我物理点击<a data-toggle="tab" href="#tab1">时才会触发该事件。

我希望在每次选项卡更改时更新 url，并且我还希望在页面加载时显示选项卡后进行回调。

shown.bs.tab 事件不会在以编程方式显示选项卡时触发吗？

Answer 1

要让您的代码运行，需要做两件事：

1. 当hash 被插入到jQuery 的属性equals 选择器中时，正确引用或转义hash（由于# 字符）。见jQuery Selectors, Category: Attribute：

   选择器表达式中的属性值必须遵循 W3C 规则 CSS 选择器；一般来说，这意味着除了 a valid identifier 应该用引号括起来。

   • 单引号内的双引号：$('a[rel="nofollow self"]')
   • 双引号内的单引号：$("a[rel='nofollow self']")
   • 单引号内的转义单引号：$('a[rel=\'nofollow self\']')
   • 双引号内的转义双引号：$("a[rel=\"nofollow self\"]")

   您选择的变化通常是风格或方便的问题。

   链接在上面的引用中，W3C 对 CSS 中的“有效标识符”有以下说法：

   在 CSS 中，标识符（包括 selectors 中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (- ) 和下划线 (_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

   # 字符是代码点 U+0023，超出了有效标识符允许的字符范围。

2. 在执行$.tab('show')之前添加shown.bs.tab事件处理程序

因此，将您的脚本更改为以下内容：

(function(){
  $('#profile_nav_tabs a').on('shown.bs.tab', function(event){
    window.location.hash = event.target.hash;
    alert("hello");
    // some ajax call
  });

  var hash = window.location.hash;
  if(hash){
    $("#profile_nav_tabs " + 'a[href="' + hash + '"]').tab('show');
  }
})();

这必须放在 DOM 中的 HTML sn-p 之后，但我认为情况已经如此。

另请注意，您在事件处理程序绑定后缺少分号。