tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/22081-fehler-tab-navigation-probleme-bei-einbau-eines-formularsRockSolid Themes: Discussion 2021-02-01T11:26:42Ztag:help.rocksolidthemes.com,2012-07-23:Comment/432016592017-08-14T09:09:12Z2017-08-14T09:09:12ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Vielen Dank für Ihre Nachricht.</p>
<p>Dass beim neuen Laden der Seite oder beim Absenden eines Formulars die Tabs nicht geöffnet bleiben ist das normale Verhalten des Tab-Skripts.</p>
<p>Sie können jedoch per JavaScript auf einen gewünschten Tab springen. Der Code dafür könnte z. B. folgendermaßen aussehen:</p>
<pre>
<code>function triggerEvent(element, eventName) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(eventName, true, true);
element.dispatchEvent(evt);
}
triggerEvent(
document.querySelector('.tab-navigation li:nth-child(3) > a'),
'click'
);</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/432016592017-08-14T10:32:28Z2017-08-14T10:32:29ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Hallo,<br>
vielen Dank für den Tipp. So ganz geht es noch nicht.</p>
<p>Wir haben es mal ausprobiert und unter Seitenlayout unter "Eigener Javascript-Code" eingebunden und nun ergibt sich die merkwürdige Situation, dass einfach immer der 3. Tab aktiv ist, sofern 3 Tabs vorhanden sind.</p>
<p>Das heisst, aktiviere ich ein Formular im ersten oder zweiten Tab, lande ich immer im 3Tab.<br>
Habt Ihr eine Idee, wie man das in den Griff bekommt?</p>
<p>Viele Grüße,</p>
<p>Gerhard</p></div>Gerhardtag:help.rocksolidthemes.com,2012-07-23:Comment/432016592017-08-14T14:43:58Z2017-08-14T14:43:58ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Der angeführte Code ist ein Beispiel dafür wie der dritte Tab per JavaScript aktiviert werden kann, der CSS-Selektor <code>:nth-child(3)</code> spricht dabei den dritten Tab an. Der JavaScript-Code sollte entsprechend Ihren Anwendungsfällen angepasst werden.</p>
<p>Sollten Sie Unterstützung bei der Anpassung benötigen, stehen Ihnen unsere Partner gerne zur Verfügung. Eine Auswahl an Agenturen und Freelancer finden Sie in unserem Partnernetzwerk: <a href="https://rocksolidthemes.com/de/contao/service/agenturen">https://rocksolidthemes.com/de/contao/service/agenturen</a></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/432016592017-08-17T14:18:40Z2017-08-17T14:18:42ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Hallo,</p>
<p>unser Entwickler hat einiges probiert und er sagt dazu:</p>
<p>Es gibt nur eine "Lösung": Einbindung ins Seitenlayout.<br>
Das ist aber keine Lösung, weil man da gar keine PHP-Abfrage machen kann -_-<br>
Von daher kann ich nur grundsätzlich sagen, dass Tab2 oder Tab3 oder TabX offen sein sollen - und das bringt mir nicht viel. Dann ist der Tab immer offen - egal ob der User vorher ein Formular in diesem Tab ausgefüllt hat oder in einem anderen.<br>
So wie es aussieht, könnte es sich doch um einen Bug handeln, da es bei den jQuery-Tabs auch funktioniert, dass man direkt drauf springen kann.<br>
Abgesehen davon hat man ein Problem, falls man mehrere Tab-Situationen auf der Seite hat.<br>
Das Problem muss dynamisch gelöst werden. Wenn ich auf #video springen will, muss dieser Tab danach auch offen sein!!! Das gelieferte Script ist daher so nicht verwendbar.</p>
<p>Haben Sie dazu noch eine andere Lösung?</p>
<p>Viele Grüße,</p>
<p>Gerhard Hoffmann</p></div>Gerhardtag:help.rocksolidthemes.com,2012-07-23:Comment/432016592017-08-18T04:24:58Z2017-08-18T04:24:58ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><blockquote>
<p>So wie es aussieht, könnte es sich doch um einen Bug handeln, da es bei den jQuery-Tabs auch funktioniert, dass man direkt drauf springen kann.</p>
</blockquote>
<p>Automatisch auf einen Tab zu springen über ein Sprungziel (#) in der URL wird von den Tabs in Oneo nicht unterstützt.</p>
<blockquote>
<p>Das gelieferte Script ist daher so nicht verwendbar.</p>
</blockquote>
<p>Das gelieferte Skript war ein Beispiel dafür wie man auf einen bestimmten Tab springen kann.</p>
<p>Um auf den Tab zu wechseln der als Sprungziel in der URL steht könnte das Skript z. B. folgendermaßen aussehen:</p>
<pre>
<code>(function(){
function triggerEvent(element, eventName) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(eventName, true, true);
element.dispatchEvent(evt);
}
var link = document.querySelector('.tab-navigation a[href$="'+document.location.hash+'"]');
if (link) {
triggerEvent(link, 'click');
}
})();</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/432016592021-01-28T08:51:11Z2021-01-28T08:51:11ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Leider funktioniert der da erwähnte Code nicht. Siehe <a href="https://dev.hotelotto.com/de/zimmer">https://dev.hotelotto.com/de/zimmer</a> Versuchen Sie bitte unter Zimmer einen der Links anzuklicken, um zu sehen, wie sich das verhält.</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/432016592021-01-29T07:59:02Z2021-01-29T07:59:02ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Sie haben das Skript anscheinend im Head-Bereich der Website eingebunden. Es muss jedoch ausgeführt werden sobald Jemand auf den Link klickt der den Tab öffnen soll.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/432016592021-01-29T09:26:35Z2021-01-29T09:26:35ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Hallo,</p>
<p>das ist klar. Die Frage ist, wo der Code sein muss und was ich da ändern soll? Sagen wir mal, wenn ich einen der Anchorn-Links der .header-navigation anklicke, muss ich diese für dieses Element irgendwo in Ihrem Code erwähnen?</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/432016592021-01-31T22:00:47Z2021-01-31T22:00:47ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Über eine mehr erklärende Antwort würde ich mich freuen. :-)</p>
<p>Schon jetzt danke ich Ihnen für Ihre Antwort und wünsche Ihnen noch einen schönen Tag.</p></div>jan.kouttag:help.rocksolidthemes.com,2012-07-23:Comment/432016592021-02-01T11:26:39Z2021-02-01T11:26:39ZFehler: Tab-Navigation: Probleme bei Einbau eines Formulars<div><p>Weitere Informationen dazu finden Sie in folgendem Beitrag: <a href="https://help.rocksolidthemes.com/discussions/contao/64058#comment_49006298">https://help.rocksolidthemes.com/discussions/contao/64058#comment_49006298</a></p></div>RockSolid Themes