✔ JQuery Tab: Bestimmten Tab per Hyperlink von anderer Seite aufrufen

novize · 15. Januar 2017

Hallo zusammen,

die Frage hat bestimmt schon einen langen Bart...aber ich komme als Anfänger einfach nicht weiter und finde auch keinen passenden Beitrag für mein Problem.

Ihr könnt mir mit Sicherheit weiterhelfen.
Ich erstelle zurzeit eine neue Homepage (noch nicht online) und komme mit folgendem Problem nicht weiter:
Ich möchte von der Startseite Hyperlinks (Spielberichte) auf eine andere Seite setzen und es soll jeweils der entsprechende Tab geöffnet werden.

Beispiel: Link "Spielbericht_25.01" öffnet Tab "25.01"

Ich habe folgende HTML-Codes:

Startseite:

Code:

<div class="col span_3_of_12">
                <aside class="trans02 matchheight">
                    <h1>Aktuelle Spiel<wbr/>berichte</h1>
                    <ul>
                        <li><a href="./spielberichte_rueckrunde_2017.html#25.1">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                        <li><a href="#">Link1 </a></li>
                    </ul>
                </aside> 
            </div>
            </div>

Spielberichte auf einer anderen Seite:

Code:

<div class="col span_9_of_12">
                <div id="tab-1" class="tabs" class="tabs-ul" class="tabs-li" title="17.1">
                <h3>Spielbericht vom 17.01.2017</h3>
                <p class="trans01">Text 1</p>
                </div>
                <div id="tab-2" class="tabs" class="tabs-ul" class="tabs-li" title="25.1">
                <h3 >Spielbericht vom 25.01.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-3" class="tabs" class="tabs-ul" class="tabs-li" title="2.2">
                <h3>Spielbericht vom 02.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-4" class="tabs" class="tabs-ul" class="tabs-li" title="13.2">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-5" class="tabs" class="tabs-ul" class="tabs-li" title="27.2">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-6" class="tabs" class="tabs-ul" class="tabs-li" title="3.3">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-7" class="tabs" class="tabs-ul" class="tabs-li" title="14.3">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-8" class="tabs" class="tabs-ul" class="tabs-li" title="19.3">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-9" class="tabs" class="tabs-ul" class="tabs-li" title="17.3">
                <h2>Spielbericht vom 13.02.2017</h2>
                <p>Text 1</p>
                </div>
                <div id="tab-10" class="tabs" class="tabs-ul" class="tabs-li" title="4.4">
                <h2>Spielbericht vom 13.02.2017</h2>
                <p>Text 1</p>
                </div>

Die Tabs werden per Script generiert: --und hier komme ich nicht weiter. Wie kann ich den jeweiligen Tab denn anspringen?
Was fehlt denn in diesem Script?

Javascript:

var makeTabs = {
    init: function() {
        var $pages = $("div.tabs");
        if (!$pages.length) return;
        $pages.addClass("dyn-tabs");
        $pages.first().show();
        var tabNavigation = $('<ul id="tabs" class="tabs-ul" />')
              .insertBefore($pages.first());
       $pages.each(function() {
        var listElement  = $('<li class="tabs-li"/>');
        var label = $(this).attr("title") ?
                   $(this).attr("title") :
                    "Kein Label";
       listElement.text(label);
        tabNavigation.append(listElement);
    });
    var items = tabNavigation.find("li");
    items.first().addClass("current");
    items.click(function() {
        items.removeClass("current");
        $(this).addClass("current");
        $pages.hide();
        $pages.eq($(this).index()).fadeIn("slow");
    }); 
  }
};
$(document).ready(makeTabs.init);

Vielen Dank für Eure Hilfe!!

SpiceLab · 15. Januar 2017

novize hat gesagt.:
finde auch keinen passenden Beitrag für mein Problem.

Wo? Speziell hier im Forum? Oder generell im Netz?

Ich finde es auch immer wieder bemerkenswert, dass User ihre "Ausbauwünsche" zu einem entdeckten Codesnippet nicht zuerst direkt an den Autor addressieren/richten, um aus erster Quelle Hilfe zu bekommen, geschweige denn nach einer Alternative Ausschau halten, die eher ihren Vorstellungen näherkommt bzw. sich einfacher darauf abstimmen lässt, bevor sie sich zum Schluß an ein Forum wenden, weil die ersten beiden genannten Schritte zu keinem Erfolg geführt haben.

http://jqueryui.com/tabs/

Demo-Link: http://jqueryui.com/resources/demos/tabs/default.html#tabs-2 ruft direkt den zweiten Tab des Demos auf, ohne auch nur irgendetwas am bestehenden Script ergänzt haben zu müssen.

[edit]Tipp-Ex[/edit]

novize · 15. Januar 2017

Danke für den Tipp.
Ich habe im Netz und hier im Forum gesucht.
Mein Interesse ist es den Code, der in den Grundzügen aus dem Buch Jquery - Das umfassende Handbuch stammt, an meine Bedürfnisse anzupassen, da ich die Sprache lernen möchte.
Ich habe verschiedene Möglichkeiten ausprobiert z.B. bei var listElement einen a-tag hinzugefügt, was (natürlich) nicht funktioniert, da ja immer nur der selbst tag generiert wird. Anhand des Buches finde ich hierfür nicht den richtigen Einstieg.
Ich möchte nicht einfach nur Codesnippets kopieren, wenn es sich vermeiden lässt und würde mich über Hilfe freuen

Sempervivum · 15. Januar 2017

So funktioniert es:

Code:

                var makeTabs = {
                    init: function () {
                        var label_url = window.location.hash.replace("#", "");
                        var $pages = $("div.tabs");
                        if (!$pages.length) return;
                        $pages.addClass("dyn-tabs");
                        var tabNavigation = $('<ul id="tabs" class="tabs-ul" />')
                              .insertBefore($pages.first());
                        $pages.each(function () {
                            var listElement = $('<li class="tabs-li"/>');
                            var label = $(this).attr("title") ?
                                       $(this).attr("title") :
                                        "Kein Label";
                            if (label == label_url) $(this).show(); else $(this).hide();
                            listElement.text(label);
                            tabNavigation.append(listElement);
                        });
                        var items = tabNavigation.find("li");
                        items.first().addClass("current");
                        items.click(function () {
                            items.removeClass("current");
                            $(this).addClass("current");
                            $pages.hide();
                            $pages.eq($(this).index()).fadeIn("slow");
                        });
                    }
                };
                $(document).ready(makeTabs.init);

novize · 15. Januar 2017

Hallo Sempervivum,

klasse. Vielen Dank für Deine Hilfe! Ich habe es ausprobiert. Der richtige Text wird geladen aber der dazugehörige Tab (25.1) öffnet sich nicht. Der erste Tab (17.1) ist der aktive Zeile 10). Muss das in der var label_url berücksichtigt werden?

Code:

<div id="maincontent">
            <div class="section group">
            <div class="col span_3_of_12">&nbsp;</div>
            <div class="col span_9_of_12"><h1 class="var02">Spielberichte Rückrunde 2017</h1>
            </div>
            </div>
            <div class="section group">                
          <div class="col span_9_of_12">
                <ul id="tabs" class="tabs-ul">
                     <li class="tabs-li current">17.1</li>
                     <li class="tabs-li">25.1</li>
                     <li class="tabs-li">2.2</li>
                     <li class="tabs-li">13.2</li>
                     <li class="tabs-li">27.2</li>
                      <li class="tabs-li">3.3</li>
                      <li class="tabs-li">14.3</li>
                      <li class="tabs-li">19.3</li>
                      <li class="tabs-li">17.3</li>
                     <li class="tabs-li">4.4</li>
                   </ul>
                 <div id="tab-1" class="tabs dyn-tabs" title="17.1" style="display: none;">
                <h3>Spielbericht vom 17.01.2017</h3>
                <p class="trans01">Text 1</p>
                </div>
                <div id="tab-2" class="tabs dyn-tabs" title="25.1" style="display: block;">
                <h3>Spielbericht vom 25.01.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-3" class="tabs dyn-tabs" title="2.2" style="display: none;">
                <h3>Spielbericht vom 02.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-4" class="tabs dyn-tabs" title="13.2" style="display: none;">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-5" class="tabs dyn-tabs" title="27.2" style="display: none;">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-6" class="tabs dyn-tabs" title="3.3" style="display: none;">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-7" class="tabs dyn-tabs" title="14.3" style="display: none;">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-8" class="tabs dyn-tabs" title="19.3" style="display: none;">
                <h3>Spielbericht vom 13.02.2017</h3>
                <p>Text 1</p>
                </div>
                <div id="tab-9" class="tabs dyn-tabs" title="17.3" style="display: none;">
                <h2>Spielbericht vom 13.02.2017</h2>
                <p>Text 1</p>
                </div>
                <div id="tab-10" class="tabs dyn-tabs" title="4.4" style="display: none;">
                <h2>Spielbericht vom 13.02.2017</h2>
                <p>Text 1</p>
                </div>                         
            </div>
           </div> 
            <div class="section group">
            <div class="col span_12_of_12">&nbsp;</div>
            </div>         
        </div>

Sempervivum · 15. Januar 2017

Du hast Recht, man muss auch noch die Klasse "current" setzen bzw. löschen:

Code:

                var makeTabs = {
                    init: function () {
                        var label_url = window.location.hash.replace("#", "");
                        var $pages = $("div.tabs");
                        if (!$pages.length) return;
                        $pages.addClass("dyn-tabs");
                        var tabNavigation = $('<ul id="tabs" class="tabs-ul" />')
                              .insertBefore($pages.first());
                        $pages.each(function () {
                            var listElement = $('<li class="tabs-li"/>');
                            var label = $(this).attr("title") ?
                                       $(this).attr("title") :
                                        "Kein Label";
                            if (label == label_url) {
                                $(this).show();
                                listElement.addClass("current");
                            } else {
                                $(this).hide();
                                listElement.removeClass("current");
                            }
                            listElement.text(label);
                            tabNavigation.append(listElement);
                        });
                        var items = tabNavigation.find("li");
                        items.first().addClass("current");
                        items.click(function () {
                            items.removeClass("current");
                            $(this).addClass("current");
                            $pages.hide();
                            $pages.eq($(this).index()).fadeIn("slow");
                        });
                    }
                };

novize · 15. Januar 2017

Das ist schon fast perfekt. Wie kann denn der erste Tab (17.1) deaktiviert werden? Habe als Beispiel mal mit dem Skript den 14.3. geöffnet. Der 17.1 wird ebenfalls noch als geöffnet gekennzeichnet.:

Liebe Grüße und herzlichen Dank für Deine Hilfe!

Sempervivum · 15. Januar 2017

Ah, da war noch ein Relikt:

Code:

                        items.first().addClass("current");

Löscht man dies, müsste es funktionieren:

Code:

                var makeTabs = {
                    init: function () {
                        var label_url = window.location.hash.replace("#", "");
                        var $pages = $("div.tabs");
                        if (!$pages.length) return;
                        $pages.addClass("dyn-tabs");
                        var tabNavigation = $('<ul id="tabs" class="tabs-ul" />')
                              .insertBefore($pages.first());
                        $pages.each(function () {
                            var listElement = $('<li class="tabs-li"/>');
                            var label = $(this).attr("title") ?
                                       $(this).attr("title") :
                                        "Kein Label";
                            if (label == label_url) {
                                $(this).show();
                                listElement.addClass("current");
                            } else {
                                $(this).hide();
                                listElement.removeClass("current");
                            }
                            listElement.text(label);
                            tabNavigation.append(listElement);
                        });
                        var items = tabNavigation.find("li");
                        items.click(function () {
                            items.removeClass("current");
                            $(this).addClass("current");
                            $pages.hide();
                            $pages.eq($(this).index()).fadeIn("slow");
                        });
                    }
                };

novize · 15. Januar 2017

Genauso habe ich es mir vorgestellt und einfach nicht hinbekommen. Super! Jetzt komme ich endlich wieder mit meiner Homepage voran...die ich ehrenamtlich für unseren Verein erstelle.
Ich gebe Dir ein virtuelles Bier aus:

LG und noch einen schönen Abend

✔ JQuery Tab: Bestimmten Tab per Hyperlink von anderer Seite aufrufen

novize

Grünschnabel

SpiceLab

ZENmechanic

novize

Grünschnabel

Sempervivum

Erfahrenes Mitglied

novize

Grünschnabel

Sempervivum

Erfahrenes Mitglied

novize

Grünschnabel

Sempervivum

Erfahrenes Mitglied

novize

Grünschnabel

Neue Beiträge