jQuery-Syntaxfehler: # /

Ich bin derzeit mit jQuery, Twitter Bootstrap und AngularJS für meine web-Anwendung. Ich habe versucht zu tun, das routing, aber jQuery gibt mir immer Syntax error, unrecognized expression: #/time immer, wenn ich versuche, klicken Sie auf die Registerkarte Zeit, oder Umgekehrt. Ich habe keine Ahnung, was diesen Fehler verursacht, außer, dass es durch das # - Zeichen. Ich habe ausgiebig gegoogelt, aber ohne Erfolg. Hier ist mein 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>

Ich brauche, um den Schrägstrich als ich es für meine AngularJS routing (d.h. index.html#/main und index.html#/time geladen werden, die unterschiedliche Inhalte in einem meiner divs).
Was könnte diesen Fehler verursacht?

Kommentar zu dem Problem

Soweit ich sehen kann, Sie wollen ein Anker - so einfach entfernen Sie den Schrägstrich, schreiben, #main, #Zeit statt #/main, #/Zeit. Kommentarautor: axel.michel

Ich bin eigentlich mit dem Schrägstrich für meine angularJS routing, also kann ich nicht entfernen. ): Bearbeitet meine post zu reflektieren. Kommentarautor: Wei Hao

Sie melden einen Syntaxfehler und gar nicht nach dem code, den es auslöst. Kommentarautor: Álvaro González

@ÁlvaroG.Vicario ich. Das code-block, der ist direkt verantwortlich für die Auslösung der Fehler. Der eigentliche Fehler tritt auf, innen jquery.min.js selbst. Ich habe auch festgestellt das der Fehler im ersten Absatz. Dank der PSL, ich habe erkannt, dass es verursacht wurde durch einen Konflikt mit Twitter Bootstrap ist Tab. Kommentarautor: Wei Hao

InformationsquelleAutor der Frage Wei Hao | 2013-05-28

28

Denke ich mal extra Schrägstrich in der href Angabe id des Ziels. entfernen Sie Sie und es sollte funktionieren.
```
<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 sieht auf den href-Wert als id für das Ziel-element angezeigt werden als Registerkarte Inhalt. ALSO hier in diesem Fall wäre es auf der Suche nach etwas mit id = #/time die nicht vorhanden ist.

wenn Sie behalten möchten href intakt, Sie können mit dem data-Attribut target
```
<a href="#/main" data-toggle="tab" data-target="#main" id="main-tab">Main</a>
```
Demo

InformationsquelleAutor der Antwort PSL
4

Dieses Problem angezeigt werden, wenn die Verwendung von jquery v3.* und bootstrap3, weil "#" ist nicht mehr ein Gültiger Selektor(
Sie können das Problem beheben, indem statt und die Attribute entfernen href="#" und data-target="#" für dropdowns.
Sieht wie folgt aus:
```
<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>
```
Für Reiter, die unter Verwendung Ihrer Befestigung durch ersetzen "#/" von href mit "#some_your_id"

InformationsquelleAutor der Antwort alexJS
1

Einfache Lösung

Verwenden anchor-tag mit leeren href
```
<a href="" ui-sref="dashboard" >Dashboard</a>
```
InformationsquelleAutor der Antwort ajin

Ich habe meinen Fall habe ich der Vergangenheit viele Male über dieses Thema, so hier wollte ich nur teilen mein Fall,

Dort war ein code wie dieser:

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

Überspringe ich diese Zeilen und mein problem gelöst.

Es wurde ein Konflikt mit hashtagh slash #/ Handhabung in der Seite zwischen diesem code und ui.router angularJS

InformationsquelleAutor der Antwort Ebrahim

0

In diesem Wechsel-Mechanismus, der data-toggle="tab" sieht den Wechsel zwischen verschiedenen tabs. Aber, im Falle der Verwendung von Angular-Routing diese Verknüpfungen zu anderen Dateien anzeigen.

Versuchte ich data-toggle="link" - und es funktionierte für mich.

InformationsquelleAutor der Antwort DEEPAK SURANA

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Demo