Синтаксическая ошибка jQuery: #/

В настоящее время я использую jQuery, Twitter Bootstrap и AngularJS для своего веб-приложения. Я пытаюсь выполнить маршрутизацию, но jQuery продолжает давать мне Syntax error, unrecognized expression: #/time всякий раз, когда я пытаюсь щелкнуть вкладку времени или наоборот. Я не знаю, что вызывает эту ошибку, за исключением того, что она вызвана знаком #. Я широко использую googled, но безрезультатно. Вот мой код:

<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

Я предполагаю, что дополнительная слэш в 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 = #/time, которого не существует.

если вы хотите сохранить href intact, вы можете использовать атрибут data-target

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

Демо

Ответ 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"

Ответ 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", и это сработало для меня.