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

[journeyman]

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):

index.php?content=seminare#tab2

Code zum öffnen eines bestimmten Tab:

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:

<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.

 

[mikdoe]

* freigeschaltet *

 

[tsseh]

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 - - -

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)

 

[journeyman]

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:

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

... 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.

 

[tsseh]

Und es funktioniert. Werde es aber nochmal ausgiebig testen

das würde mich wundern, außerdem macht .tab('show'); das schon

 

[journeyman]

Habe ich mir auch gedacht: Dann habe ich folgenden Code angepasst und die Klasse 'activ' enfernt:

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

 

[tsseh]

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

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

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

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

 

[journeyman]

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.

 

[tsseh]

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.