jQuery erreur de syntaxe: #/

Je suis actuellement en utilisant jQuery, Twitter Bootstrap et AngularJS pour mon application web. J'ai essayé de faire du routage, mais jQuery garde de me donner Syntax error, unrecognized expression: #/time chaque fois que j'essaie de cliquer sur l'onglet temps, ou vice versa. Je n'ai aucune idée de ce qui est à l'origine de cette erreur, sauf qu'elle est causée par le signe#. J'ai googlé approfondie, 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>

J'ai besoin de garder la barre oblique comme je l'utiliser pour mon AngularJS routage (c'est à dire index.html#/main et index.html#/time va charger un contenu différent dans l'un de mes divs).
Ce qui pourrait éventuellement être la cause de cette erreur?

Aussi loin que je peux voir vous voulez une ancre donc simplement supprimer la barre oblique, écrire #principal, #le temps au lieu de #/main, #/heure.
Je suis en fait à l'aide de la barre oblique pour mon angularJS de routage, donc je ne peux pas l'enlever. ): Édité mon post pour refléter cela.
Vous signalez une erreur de syntaxe et n'ont même pas poster le code qui la déclenche.
Je l'ai fait. Ce bloc de code est directement responsable du déclenchement de l'erreur. L'erreur se produit à l'intérieur jquery.min.js lui-même. J'ai également parlé de l'erreur réelle donnée dans le premier paragraphe. Grâce à PSL, j'ai réalisé que c'était dû à un conflit avec Twitter Bootstrap de la tabulation.

InformationsquelleAutor Wei Hao | 2013-05-28

28

Je suppose supplémentaire barre oblique dans le href précisant id de la cible. les retirer et il 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 regarde href valeur de l'id de l'élément cible à être montré que le contenu de l'onglet. DONC ici, dans ce cas, il serait à la recherche de quelque chose avec l'id = #/time qui n'existe pas.

si vous voulez garder href intact, vous pouvez utiliser les données de l'attribut cible
```
<a href="#/main" data-toggle="tab" data-target="#main" id="main-tab">Main</a>
```
Démo
- Je vois. Donc, il est en fait un conflit entre le "bootstrap" et mes liens (depuis que je suis en train de lien par Angulaire). L'alternative est de ne pas utiliser bootstrap pour le style de ma barre de navigation, puis..?
- L'utilisation de données cible. voir ma mise à jour.
- Voir le violon, jsfiddle.net/MXUN9
- Qui a très bien fonctionné pour moi. Merci!!!!!
- de données de l'attribut cible est ce dont j'avais besoin, merci. Je n'ai pas la voir documenté, mais maintenant je le vois dans le code source. merci!
- Mon problème n'est pas résolu, je suis à l'aide de l'interface utilisateur du routeur angulaire avec jquery et bootstrap
InformationsquelleAutor PSL
4

Ce problème apparaît lors de l'utilisation de jquery v3.* et bootstrap3, parce que "#" n'est plus valide sélecteur(
Vous pouvez y remédier en utilisant au lieu de supprimer 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, ce qui aide c'est la fixation par remplacer "#/" à partir href avec "#some_your_id"
- Merci - ce qui semble être le problème que j'ai avec jQuery slim 3.2.1 et bootstrap 3.3.7.
InformationsquelleAutor alexJS
1

Solution Simple

Utiliser la balise d'ancrage avec vide href
```
<a href="" ui-sref="dashboard" >Dashboard</a>
```
InformationsquelleAutor ajin

J'ai mon cas, j'ai passé beaucoup de temps sur cette question, alors voila je voulais juste partager mon cas,

Il y avait un code comme ceci:

   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 me passer de ces lignes et mon problème résolu.

C'est un conflit avec mot-clic barre oblique #/ de la manipulation dans la page entre le présent code et de l'interface utilisateur.routeur angularJS

InformationsquelleAutor Ebrahim

0

Dans ce mécanisme de basculement, data-toggle="tab" semble basculer entre les différents onglets. Mais, dans le cas de l'utilisation Angulaire de l'Acheminement de ces liens vers les différents fichiers de vue.

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

InformationsquelleAutor DEEPAK SURANA

Vous devez vous connecter pour publier un commentaire.

Démo