Ergebnis 1 bis 3 von 3

Thema: jQuery Tabs direkt verlinken

  1. #1
    Neuer Benutzer
    Registriert seit
    23.10.2012
    Beiträge
    1

    Standard jQuery Tabs direkt verlinken

    Hallo zusammen,

    auf meiner Seite nutze ich das jQuery Tabs Script um verschiedene Inhalte in einem Frame anzuzeigen. Das funktioniert soweit auch alles ganz gut, nur bekomme ich es nicht hin, dass man auf der selben Seite (außerhalb des Tab-Divs) ein Tab direkt verlinken kann.

    Habe hier im Forum auch schon ein ähnliches Problem gefunden:
    JQUERY - TABS - Interne Links (aber wie?) + FadeIn (von cutterscrossing)

    Allerdings kriege ich das bei mir nicht wirklich zum Laufen und würde Euch gerne um Hilfe bitten.

    Folgenden Code nutze ich aktuell:

    Code:
    <script type="text/javascript" src="http://www.meinedomain.de/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script>
    $(function() {
            tabs = $('#tabs').tabs({
                    'select': function(event, ui){document.location.hash = ui.panel.id;}
            });
            tabs.tabs('select',document.location.hash);
    }); 
    </script>
    Code:
    <div id="tabs">
            <ul class="product-tabs">
                    <li><a href="#Preisvergleich">Preisvergleich</a></li>
                    <li><a href="#Datenblatt">Technische Daten</a></li>
                    <li><a href="#Testberichte">Testberichte</a></li>
                    <li><a href="#Meinungen">Meinungen</a></li>
            </ul>
            <ol id="Preisvergleich" class="price-comparison">
                    Content...
            </ol>
            <ol id="Datenblatt" class="specification">
                    Content...
            </ol>
            <ol id="Testberichte" class="test-results">
                    Content...
            </ol>
            <ol id="Meinungen" class="user-rating">
                    Content...
            </ol>
    </div>
    Und über den Tabs habe ich ein Link direkt zu den Meinungen:

    Code:
    <a href="#Meinungen" class="rating">Direkt zu den Meinungen</a>
    Wenn ich diesen Link anklicke, dann ändert sich zwar die URL entsprechend, aber der Tab-Content ändert sich nicht.

    Ich habe es auch schon mit folgendem ausprobiert:

    Code:
    $('#tabs').click(function() { // bind click event to link
        $tabs.tabs('select', 4); // switch to third tab
        return false;
    });
    Aber damit tut sich auch nichts. Wahrscheinlich habe ich es falsch in den <head> integriert.

    Könnt Ihr mir dabei vielleicht helfen? Ich habe ehrlich gesagt nicht so viel Ahnung von Javascript und jQuery. Suche mir immer fertige Lösungen aus dem Internet, probiere diese aus und passe sie ggf. ein wenig an. Aber mit dem hier komme ich einfach nicht weiter...

    Beste Grüße
    Manuel
    Geändert von marowi (15.11.2012 um 12:48 Uhr)

  2. #2
    Neuer Benutzer
    Registriert seit
    22.10.2012
    Beiträge
    3

    Standard

    Falls es dich beruhigt: Du bist keineswegs der einzige der an der manuellen aktivierung von Tabs scheitert, ich hab mich da auch lange umsonst dran versucht.

    Es gibt allerdings eine Alternative dazu:
    HTML-Code:
    <div class="tabs" id = "tabs">
            <a href="press.php">Presse</a>
            <a href="news.php">News</a>
            <a href="gallery.php">Bilder</a>
    </div>
    <div class="panes">
             <div style="display:block"></div>
    </div>
    <script>
            $("div.tabs").tabs(
              "div.panes > div",
              {effect: 'ajax', history: true}
            );
    </script>
    Auf die Art wird der Content wirklich davon abhängig gemacht was in den Links steht - bei anwählen eines Tabs wird der Content aus der angegebenen php-Datei gezogen - und somit funktioniert auch die direkte Angabe eines Links. Auch ein aktualisieren der Seite ohne direkt wieder im ersten Tab zu landen ist dann möglich.
    Eine Verlinkung sähe in meinem Fall so aus:
    HTML-Code:
    <a href = "index.php#news.php">test</a>
    Diese Art der Dateiangabe ist übrigens genausogut mit HTML-Dateien möglich, und auch GET-Parameter können in PHP-Dateien angehängt werden.

  3. #3
    Neuer Benutzer Avatar von Ajax_der_Teutone
    Registriert seit
    05.01.2013
    Beiträge
    9

    Standard

    Moin marowi,

    ich habe mal deine aktuelle Version probiert und bin zu dem Ergebnis gekommen, dass es bei mir auf jeden Fall nicht funktionieren will.
    Alles ausprobiert und geprüft, bei mir gibt es ständig Fehler. Variante 2 klappt jedoch bestens bei mir

Ähnliche Themen

  1. JQuery, Tabs & Reload - NUR der 1. Tab wird nicht nachgeladen
    Von Nevery im Forum Serverseitige Skriptsprachen
    Antworten: 1
    Letzter Beitrag: 30.10.2012, 12:57
  2. jQuery UI Ajax Tabs und FancyBox
    Von Renni The Pitz im Forum Serverseitige Skriptsprachen
    Antworten: 3
    Letzter Beitrag: 01.12.2011, 11:01
  3. Antworten: 21
    Letzter Beitrag: 07.05.2011, 16:51
  4. JQuery-UI Tabs Problem
    Von Meistercoach im Forum Programmbibliotheken
    Antworten: 1
    Letzter Beitrag: 15.04.2010, 15:12
  5. JQuery-UI Tabs Problem
    Von Meistercoach im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 14.01.2010, 09:13

Lesezeichen

Lesezeichen
  • An Mister Wong übertragenMister Wong
  • An YiGG.de übertragenYiGG.de
  • An Google übertragenGoogle
  • An del.icio.us übertragendel.icio.us

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •