24

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

<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 中加载不同的内容）。什么可能导致此错误？

4

4 回答 4

28

I guess extra slash in the href specifying id of the target. remove them and it should work fine.

<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 looks at the href value as id for the target element to be shown as tab content. SO here in this case it would be looking for something with id = #/time which doesn't exist.

if you want to keep href intact you can use data-target attribute 

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

Demo

于 2013-05-28T06:33:21.470 回答
4

使用 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”来修复

于 2017-05-18T12:32:49.287 回答
0

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

有这样的代码：

   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);
    //});
},

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

此代码与 ui.router angularJS 之间的页面中的hashtagh 斜杠 #/处理存在冲突

于 2016-01-08T12:28:51.010 回答
0

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

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

于 2017-04-13T04:55:27.337 回答