jQuery语法错误:#​​/

2021/01/23 01:41 · jquery ·  · 0评论

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

<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#/mainindex.html#/time将加载在我的div一个不同的内容)。是什么可能导致此错误?

我猜在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>

演示版

当使用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”

我有我的案子,我就这个问题过去了很多次,所以在这里我只想分享我的案子

有这样的代码:

   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斜杠 #/处理发生冲突。

在这种切换机制中,data-toggle="tab"看起来可以在不同的选项卡之间切换。但是,如果使用“角路由”,则这些链接将指向不同的视图文件。

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

本文地址:http://jquery.askforanswer.com/jqueryyufacuowu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!