web-dev-qa-db-ja.com

jQuery構文エラー：＃/

私は現在、jQuery、Twitter Bootstrap、およびAngularJSを私のWebアプリケーションに使用しています。ルーティングを試みましたが、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の1つに異なるコンテンツをロードします）。このエラーの原因は何ですか？

jquerytwitter-bootstrapangularjs
24
Wei Hao

ターゲットの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は、タブのコンテンツとして表示されるターゲット要素のIDとしてhref値を調べます。 SOこの場合、ここでは、存在しないid = #/timeの何かを探しています。

hrefをそのままにしたい場合は、data-target属性を使用できます

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

デモ

28
PSL

この問題は、jquery v3。*およびbootstrap3を使用している場合に発生します。これは、「＃」が有効なセレクターではなくなったためです。このように見えます：

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

タブの場合、それを使用して修正します"＃/" from hrefを"＃some_your_id"で置き換えます

4
alexJS

私は自分のケースを持っています。この問題に関して何度も過去を過ごしたので、ここで私は自分のケースを共有したかったのですが、

このようなコードがありました：

   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 slash＃/処理との競合でした

0
Ebrahim

この切り替えメカニズムでは、data-toggle="tab"は、異なるタブを切り替えるように見えます。ただし、Angularを使用する場合は、これらのリンクを別のビューファイルにルーティングします。

私は試した data-toggle="link"そしてそれは私のために働いた。

0
DEEPAK SURANA