Question

这是我的HTML：

ViewContext.Controller.HasPermission("somePermission")

这是我的Javascript：

<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>

现在，如果我刷新页面，网址为(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事件不会触发。也就是说，警报显示和ajax调用都没有。

只有在物理上点击shown.bs.tab时才会触发事件。

我希望在每个标签更改时更新网址，并且在页面加载时显示标签时我也想要回调。

<a data-toggle="tab" href="#tab1">事件是否会以编程方式显示标签而触发？

Answer 1

让代码运行需要两件事：

当它插入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＆amp; W？”可以写成“B \＆amp; W \？”或“B \ 26 W \ 3F”。

＃字符是代码点U + 0023，超出了有效标识符中允许的字符范围。
在执行shown.bs.tab

$.tab('show')

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

(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代码段之后，但我认为情况已经如此。

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

Bootstrap＆＃39; shown.bs.tab＆＃39;事件未按编程方式显示选项卡（使用选项卡（＆＃39;显示＆＃39;））

1 个答案: