Ergebnis 1 bis 9 von 9
  1. #1
    Avatar von journeyman
    journeyman ist offline Grünschnabel
    registriert
    26-04-2016
    Ort
    Swakopmund
    Beiträge
    6

    Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    Guten Morgen zusammen,
    ich habe folgende Herausforderung. Nach Klick auf einen Link soll auf einen bestimmten Bereich auf der neuen Seite gesprungen und dabei das dazugehörige Tab geöffnet werden.
    Es handelt sich also um eine Kombination aus Anchor-Funktionalität und öffne bestimmten Tab.

    Zweiters konnte ich durch folgendes Script regeln:

    Der Link zur neuen Seite (Ich nutze php include sodas wie in diesem Fall seminare.php in index.php included wird):

    Code:
    index.php?content=seminare#tab2
    Code zum öffnen eines bestimmten Tab:

    Code:
    window.onload = function(){  
    
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
    }
    
    //Change hash for page-reload
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').on('shown', function (e) {
        window.location.hash = e.target.hash;
    });
    Code für die Tabs sieht folgendermaßen aus:

    Code:
    <ul class="nav nav-tabs responsive-tabs">
        <li>
           <a data-toggle="tab" href="#tab1"><i class="fa fa-circle" aria-hidden="true"></i>Thema 1</a>
        </li>
        <li>
           <a data-toggle="tab" href="#tab2"><i class="fa fa-circle" aria-hidden="true"></i>Thema 2</a>
        </li>
        <li>
           <a data-toggle="tab" href="#tab3"><i class="fa fa-circle" aria-hidden="true"></i>Thema 3</a>
        </li>
    </ul>
    
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1">
            content 1
        </div><!-- tab-group -->
    
        <div class="tab-pane fade in" id="tab2">
            content 2
        </div><!-- tab-group -->
    
        <div class="tab-pane fade in" id="tab3">
            content 3
        </div><!-- tab-group -->
    </div>
    Ich springe auf den Anfang der neuen Seite und wenn ich runterscrolle, ist der Tab geöffnet.
    Allerdings will ich dem User das scrollen sparen und direkt an den Anfang des Tab springen.

    Hat von Euch jemand eine Idee, wie ich das bewerkstelligen kann. Vielen Dank im Voraus.
    Geändert von journeyman (08-11-2017 um 14:03 Uhr)

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.706

    AW: Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    * freigeschaltet *
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    was macht denn $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');?
    setzt das nur das div mit der entsprechenden id auf nicht hidden?
    dann musst du im anschluss nur noch location.hash entsprechend setzen
    ob sich das beisst mit window.location.hash = e.target.hash; in deinem code musst du wissen, keine ahnung wer das shown-event wann werfen soll

    index.php#tab2?content=seminare#tab2 wird nicht gehen, wenn der div hidden ist

    - - - Aktualisiert - - -

    Zitat Zitat von tsseh Beitrag anzeigen
    index.php#tab2?content=seminare#tab2 wird nicht gehen, wenn der div hidden ist
    es wird allerdings funktionieren, wenn du im php dem entsprechenden tab die class active gibst
    (natürlich musst du dein splitten anpassen und den 2. array-eintrag zur navigation nutzen)

  4. #4
    Avatar von journeyman
    journeyman ist offline Grünschnabel
    registriert
    26-04-2016
    Ort
    Swakopmund
    Beiträge
    6

    AW: Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    Zitat Zitat von tsseh Beitrag anzeigen
    es wird allerdings funktionieren, wenn du im php dem entsprechenden tab die class active gibst
    (natürlich musst du dein splitten anpassen und den 2. array-eintrag zur navigation nutzen)
    Hi, der letzte Post von dir hat mich auf eine Idee gebracht.
    Habe jetzt einfach folgendes gemacht:
    Code:
    window.onload = function(){  
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
    	$('#' + url.split('#')[1]).addClass('active');
        }
    }
    Und es funktioniert. Werde es aber nochmal ausgiebig testen

    Zitat Zitat von tsseh Beitrag anzeigen
    ... ob sich das beisst mit window.location.hash = e.target.hash; in deinem code musst du wissen, keine ahnung wer das shown-event wann werfen soll
    Diese Zeilen habe ich komplett entfernt. Bringen Null.
    Jetzt muss ich nur noch das Problem lösen, dass wenn ich auf einen Tab klicke die URL in index.php#tab geändert wird und der Browser das so in der Form beim Reload nicht findet da es eigentlich index.php?content=xyz#tab heissen müßte.

    Hat zwar jetzt nichts mehr mit dem eigentlichen Post zu tun, würde mich aber trotzdem über einen Tip freuen.

    Danke nochmal an Dich tsseh. You safed my weekend.

  5. #5
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    Zitat Zitat von journeyman Beitrag anzeigen
    Und es funktioniert. Werde es aber nochmal ausgiebig testen
    das würde mich wundern, außerdem macht .tab('show'); das schon

  6. #6
    Avatar von journeyman
    journeyman ist offline Grünschnabel
    registriert
    26-04-2016
    Ort
    Swakopmund
    Beiträge
    6

    AW: Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    Habe ich mir auch gedacht: Dann habe ich folgenden Code angepasst und die Klasse 'activ' enfernt:
    Code:
    <div class="tab-content">
        <div class="tab-pane fade in" id="tab1">
            content 1
        </div><!-- tab-group -->
    
        <div class="tab-pane fade in" id="tab2">
            content 2
        </div><!-- tab-group -->
    
        <div class="tab-pane fade in" id="tab3">
            content 3
        </div><!-- tab-group -->
    </div>
    Ich möchte ja nicht vordefinieren welcher Content activ ist sondern erst bei Klick auf den Link den Content aktiv schalten.
    Und siehe da, bei keinem der tab-panes gibt es die Klasse 'activ'

    Also scheint $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show'); nicht auszureichen.
    Mit $('#' + url.split('#')[1]).addClass('active'); funktioniert es definitiv

    Zweites Problem habe ich auch gelöst. Wahrscheinlich stehen Euch Javascript Profis jetzt die Haare zu Berge. Aber auch das scheint zu funktionieren.
    $('.nav-tabs a').on('click', function () {
    $org_url = window.location.href.replace(window.location.hash, '');
    $url_hash = $(this).attr('href');
    window.location.href = $org_url + $url_hash;
    return false;
    });
    Geändert von journeyman (09-11-2017 um 18:13 Uhr)

  7. #7
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666
    Zitat Zitat von journeyman Beitrag anzeigen
    Ich möchte ja nicht vordefinieren welcher Content activ ist sondern erst bei Klick auf den Link den Content aktiv schalten.
    ich dachte genau das ist das ziel, index.php?content=seminare#tab2 soll seminare.php einbinden und tab2 activ setzen.
    seminare.php könnte von index.php also mit ?tab=tab2 eingebunden werden und seminare.php setzt bei tab2 die class activ

    Zitat Zitat von journeyman Beitrag anzeigen
    Und siehe da, bei keinem der tab-panes gibt es die Klasse 'activ'
    ja, logisch, du hast activ ja auch nicht gesetzt, erst wenn du jetzt tab('show') aufrufst, sollte bei einem tab wieder 'activ' gesetzt sein

    Zitat Zitat von journeyman Beitrag anzeigen
    Also scheint $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show'); nicht auszureichen.
    es könnte sein, dass immer ein tab mit 'activ' versehen sein muss und da du es jetzt ganz entfernt hast .tab('show') nicht mehr funktioiert, glaube ich zwar nicht, aber möglich.
    wenn du aber irgendeinen beliebigen tab mit 'activ' versiehst, setzt .tab('show') am alten tab 'activ' zurück und am neuen wird 'activ' gesetzt


    Zitat Zitat von journeyman Beitrag anzeigen
    Zweites Problem habe ich auch gelöst. Wahrscheinlich stehen Euch Javascript Profis jetzt die Haare zu Berge. Aber auch das scheint zu funktionieren.
    keine ahnung was dein 2. problem überhaupt war

  8. #8
    Avatar von journeyman
    journeyman ist offline Grünschnabel
    registriert
    26-04-2016
    Ort
    Swakopmund
    Beiträge
    6

    AW: Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    Zitat Zitat von tsseh Beitrag anzeigen
    es könnte sein, dass immer ein tab mit 'activ' versehen sein muss und da du es jetzt ganz entfernt hast .tab('show') nicht mehr funktioiert, glaube ich zwar nicht, aber möglich.
    wenn du aber irgendeinen beliebigen tab mit 'activ' versiehst, setzt .tab('show') am alten tab 'activ' zurück und am neuen wird 'activ' gesetzt
    Und da liegt der Hase im Pfeffer. Denn wenn ich irgendeinen belieben tab 'activ' setze, funktioniert es wieder nicht. Ich komme zwar auf die Seite, das richtige tab wird geöffnet, aber ich muss wieder zu dem Bereich scrollen. Wie dem auch sei, für micht funktioniert das.

  9. #9
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Bootstrap Tab - Nach Sprung öffnen eines bestimmten Tab und richtige Stelle

    Zitat Zitat von journeyman Beitrag anzeigen
    Und da liegt der Hase im Pfeffer. Denn wenn ich irgendeinen belieben tab 'activ' setze, funktioniert es wieder nicht. Ich komme zwar auf die Seite, das richtige tab wird geöffnet, aber ich muss wieder zu dem Bereich scrollen. Wie dem auch sei, für micht funktioniert das.
    das lässt vermuten, dass tab('show') asynchron arbeitet und vielleicht irgendeine art übergang (aus-/ein-blendeffekt) hat.
    damit wird das active erst später gesetzt und der neue tab wird frühestens nach dem 1. schritt des übergangs anspringbar, spätestens nach abschluss des übergangs.
    dann müsste tab('show') aber ein callback haben um darauf reagieren zu können.

Ähnliche Themen

  1. Bilderwechsel mit Sprung zu bestimmten Bild
    Von borkat im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 07-02-2007, 16:56
  2. javascript an einer bestimmten stelle auslesen?!
    Von poollover im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 12-07-2005, 00:10
  3. im shop an richtige Stelle springen
    Von planet4 im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 14-04-2005, 07:47
  4. Datei ab einer bestimmten Stelle auslesen
    Von Redpadz im Forum Serverseitige Programmierung
    Antworten: 6
    Letzter Beitrag: 12-10-2002, 13:19
  5. ein fenster an einer bestimmten stelle öffnen
    Von Julian im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 10-02-2002, 21:16

Lesezeichen

Berechtigungen

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