web-dev-qa-db-fra.com

erreur de syntaxe jQuery: # /

J'utilise actuellement jQuery, Twitter Bootstrap et AngularJS pour mon application Web. J'ai essayé de faire du routage, mais jQuery continue à me donner Syntax error, unrecognized expression: #/time chaque fois que j'essaie de cliquer sur l'onglet Heure, ou vice versa. Je ne sais pas du tout qui est à l'origine de cette erreur, sauf que cela est causé par le signe #. J'ai beaucoup cherché dans Google mais en vain. Voici mon code:

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

Je dois conserver la barre oblique car je l'utilise pour mon routage AngularJS (c'est-à-dire que index.html#/main et index.html#/time chargeront un contenu différent dans l'un de mes divs). Quelle est la cause probable de cette erreur?

jquerytwitter-bootstrapangularjs
24
Wei Hao

J'imagine une barre supplémentaire dans la variable href spécifiant id de la cible. retirez-les et cela devrait fonctionner correctement.

<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 considère la valeur href comme id pour que l'élément cible soit affiché en tant que contenu d'onglet. SO ici dans ce cas, il s'agirait de quelque chose d'id = #/time qui n'existe pas. 

si vous voulez garder href intact, vous pouvez utiliser l'attribut data-target 

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

Démo

28
PSL

Ce problème apparaît lors de l'utilisation de jquery v3. * Et bootstrap3, car "#" n'est plus un sélecteur valide (. Vous pouvez y remédier en utilisant et en supprimant les attributs href = "#" et data-target = ". # "pour les listes déroulantes. Ressemble à ceci:

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

Pour les onglets, en utilisant sa réparation par remplacer "# /" de href par "#quelque_votre_id"

4
alexJS

Solution simple

Utiliser une balise anchor avec un blanc href 

<a href="" ui-sref="dashboard" >Dashboard</a>
1
ajin

J'ai mon cas, je suis passé plusieurs fois en ce qui concerne cette question, alors je voulais juste partager mon cas,

Il y avait un code comme celui-ci:

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

Je saute ces lignes et mon problème est résolu.

C'était un conflit avec hashtagh slash #/traitement dans la page entre ce code et ui.router angularJS

0
Ebrahim

Dans ce mécanisme de basculement, data-toggle="tab" cherche à basculer entre différents onglets. Mais, en cas d'utilisation de Angular, routez ces liens vers différents fichiers de vue.

J'ai essayé data-toggle="link" et cela a fonctionné pour moi.

0
DEEPAK SURANA