jQuery 语法错误：#/答案

【问题标题】：jQuery syntax error: #/jQuery 语法错误：#/
【发布时间】：2013-05-23 00:34:14
【问题描述】：

我目前正在为我的 Web 应用程序使用 jQuery、Twitter Bootstrap 和 AngularJS。我一直在尝试进行路由，但是每当我尝试单击时间选项卡时，jQuery 都会不断给我Syntax error, unrecognized expression: #/time，反之亦然。我不知道是什么导致了这个错误，除了它是由 # 符号引起的。我已经广泛搜索但无济于事。这是我的代码：

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#/main" data-toggle="tab" id="main-tab">Main</a>
  </li>
  <li>
    <a href="#/time" data-toggle="tab" id="time-tab">Time Reports</a>
  </li>
</ul>

我需要保留斜线，因为我将它用于我的 AngularJS 路由（即 index.html#/main 和 index.html#/time 将在我的一个 div 中加载不同的内容）。什么可能导致此错误？

【问题讨论】：

据我所知，您想要一个锚点 - 所以只需删除斜线，写 #main, #time 而不是 #/main, #/time。
我实际上是在使用斜杠进行我的 angularJS 路由，所以我无法删除它。 ): 编辑了我的帖子以反映这一点。
你报告了一个语法错误，甚至没有发布触发它的代码。
@ÁlvaroG.Vicario 我做到了。该代码块直接负责触发错误。实际错误发生在 jquery.min.js 本身内部。我还说明了第一段中给出的实际错误。感谢 PSL，我意识到这是由于与 Twitter Bootstrap 的选项卡冲突引起的。

标签： jquery twitter-bootstrap angularjs

【解决方案1】：

我猜href 中的额外斜线指定了目标的id。删除它们，它应该可以正常工作。

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#main" data-toggle="tab" id="main-tab">Main</a>
  </li>
  <li>
    <a href="#time" data-toggle="tab" id="time-tab">Time Reports</a>
  </li>
</ul>

Bootstrap 将 href 值视为要显示为选项卡内容的目标元素的 id。所以在这种情况下，它会寻找 id = #/time 不存在的东西。

如果你想保持 href 不变，你可以使用 data-target 属性

<a href="#/main" data-toggle="tab" data-target="#main" id="main-tab">Main</a>

Demo

【讨论】：

我明白了。因此，引导程序和我的链接之间实际上存在冲突（因为我试图通过 Angular 进行链接）。另一种方法是不使用引导程序来设置我的导航栏的样式......？
data-target 属性是我需要的，谢谢。我没有看到它记录在案，但现在我在源代码中看到了它。谢谢！
我的问题没有解决，我正在使用带有 jquery 和 bootstrap 的 ui-router angular

【解决方案2】：

使用 jquery v3.* 和 bootstrap3 时会出现此问题，因为“#”不再是有效的选择器（您可以通过使用而不是来修复它，并删除下拉菜单的属性 href="#" 和 data-target="#"。看起来像这样：

<button data-toggle="dropdown" class="dropdown-toggle">YOUR_CODE</button>
 <ul class="dropdown-menu">
   <li><a href="javascript:void(0)" class="your-class">YOUR_TEXT</a></li>
   <li><a href="javascript:void(0)" class="your-class">YOUR_TEXT</a></li>          
 </ul>

对于使用它的标签，通过将 href 中的 "#/" 替换为 "#some_your_id"

【讨论】：

谢谢 - 这似乎是我在使用 jQuery slim 3.2.1 和 bootstrap 3.3.7 时遇到的问题。
在使用内容安全策略 (CSP) 时要小心在 href 中使用 javascript。这与 JQ 3.x 和旧的引导函数 bootstrap-dropdown 有冲突。我建议使用 href="#0" 或更新到最新的引导程序

【解决方案3】：

我有我的案子，关于这个问题我过去很多次，所以我只想分享我的案子，

有这样的代码：

   handleTabs: function () {
    //var hash = document.location.hash;
    //var prefix = "tab_";
    //if (hash) {
    //  $('.nav a[href='+hash.replace(prefix,"")+']').trigger('click');
    //}
    //// Change hash for page-reload
    //$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    //  window.location.hash = e.target.hash.replace("#", "#" + prefix);
    //});
},

我跳过这些行，我的问题解决了。

这是与 hashtagh slash #/ 在页面中处理此代码和 ui.router angularJS 之间的冲突

【讨论】：

【解决方案4】：

在这种切换机制中，data-toggle="tab" 看起来会在不同的选项卡之间切换。但是，如果使用 Angular 路由，这些链接会指向不同的视图文件。

我尝试了data-toggle="link"，它对我有用。

【讨论】：