twitter-bootstrap jQuery 语法错误：#/
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16785264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery syntax error: #/
提问by Wei Hao
I am currently using jQuery, Twitter Bootstrap and AngularJS for my web application. I've been trying to do routing, but jQuery keeps giving me Syntax error, unrecognized expression: #/timewhenever I try to click on the time tab, or vice versa. I have no idea which is causing this error, except that it is caused by the # sign. I have googled extensively but to no avail. Here is my code:
我目前正在为我的 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>
I need to keep the slash as I use it for my AngularJS routing (i.e. index.html#/mainand index.html#/timewill load different content in one of my divs).
What could possibly be causing this error?
我需要保留斜杠，因为我将它用于我的 AngularJS 路由（即index.html#/main，index.html#/time将在我的一个 div 中加载不同的内容）。什么可能导致此错误？
回答by PSL
I guess extra slash in the hrefspecifying idof the target. remove them and it should work fine.
我猜在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 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 = #/timewhich doesn't exist.
Bootstrap 将 href 值视为要显示为选项卡内容的目标元素的 id。所以在这种情况下，它会寻找 id =#/time不存在的东西。
if you want to keep href intact you can use data-target attribute
如果你想保持 href 完整，你可以使用 data-target 属性
<a href="#/main" data-toggle="tab" data-target="#main" id="main-tab">Main</a>
Demo
演示
回答by alexJS
This issue appear when using jquery v3.* and bootstrap3, because "#" is no longer a valid selector( You can fix it by using instead of and remove attributes href="#" and data-target="#" for dropdowns. Looks like this:
使用 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>
For tabs, which using it's fixing by replace "#/"from href with "#some_your_id"
对于标签，使用它的修复方法是将href 中的“#/”替换为“#some_your_id”
回答by Ebrahim
I have my case, I past many times regarding this issue, so here I just wanted to share my case,
我有我的案例，我已经多次讨论这个问题，所以在这里我只想分享我的案例，
There was a code like this:
有这样一段代码：
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);
//});
},
I skip those lines and my problem resolved.
我跳过这些行，我的问题解决了。
It was a conflict with hashtagh slash#/handling in the page between this code and ui.router angularJS
在此代码和 ui.router angularJS 之间的页面中与hashtagh 斜杠#/处理发生冲突
回答by DEEPAK SURANA
In this toggling mechanism, data-toggle="tab"looks to switch between different tabs. But, in case of using Angular Routing these links to different view files.
在这种切换机制中，data-toggle="tab"看起来可以在不同的选项卡之间切换。但是，在使用 Angular Routing 的情况下，这些链接到不同的视图文件。
I tried data-toggle="link"and it worked for me.
我试过了data-toggle="link"，它对我有用。
