Verwendung: Tabnavigation: Erster Tab geschlossen

Ben's Avatar

Ben

03 Nov, 2020 07:22 AM

Produkt: Tao Contao
Contao-Version: 4.4
Browser und Browserversionen: alle

Hallo, kann man die Tabnavigation so einstellen, dass zuerst alle Tabs geschlossen sind? Momentan wird ja standardmäßig der erste Tab geöffnet dargestellt. Bei den Akkordeons kann man das im Template beeinflussen, vielleicht geht das ja bei der Tabnavigation ähnlich.

  1. Support Staff 1 Posted by RockSolid Theme... on 03 Nov, 2020 09:36 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Bearbeiten Sie dafür bitte die Datei files/tao/js/script.js und fügen nach folgender Zeile:

    clickFirst();
    

    diesen Code ein:

    each(targets, function(target) {
        target.style.display = 'none';
    });
    removeClass(links, 'is-active');
    
  2. 2 Posted by Ben on 03 Nov, 2020 01:40 PM

    Ben's Avatar

    Super, vielen Dank für den - wie immer - einmaligen Support.

  3. 3 Posted by Ben on 04 Nov, 2020 05:04 PM

    Ben's Avatar

    Hallo, hätte da noch eine Frage: Kann man den Tab mit der ID, die ja für die Tab-Navigation genutzt wird, auch quasi als Anker nutzen und direkt dorthin springen? So dass beim Klick auf den Tab-Button sich der eigentliche Tabinhalt im Browserfenster nach oben schiebt?

    Hoffe, dass ich meine Vorstellung einigermaßen klar ausgedrückt habe :-)

    Viele Grüße, Ben

  4. Support Staff 4 Posted by RockSolid Theme... on 05 Nov, 2020 09:28 AM

    RockSolid Themes's Avatar

    Möchten Sie über einen anderen Link der sich nicht in der Tab-Navigation befindet auf den Tab verlinken, oder möchten Sie dass beim Klick auf den Tab die Seite nach oben gescrollt wird sodass der Tab-Inhalt sichtbar ist?

  5. 5 Posted by Ben on 05 Nov, 2020 09:31 AM

    Ben's Avatar

    Hallo, vielen Dank für die Antwort. Mein Wunsch ist es, dass beim Klick auf den Tab die Seite nach oben gescrollt wird, sodass der Tab-Inhalt sichtbar ist. Wäre toll, wenn das möglich wäre.

    Vielen Dank.

  6. Support Staff 6 Posted by RockSolid Theme... on 05 Nov, 2020 12:01 PM

    RockSolid Themes's Avatar

    Fügen Sie dafür bitte in der Datei files/tao/js/script.js nach den Zeilen:

    link.blur();
    triggerEvent(window, 'resize');
    

    folgende Zeile hinzu:

    target.scrollIntoView({behavior: 'smooth'});
    
  7. 7 Posted by ExtraPunkt on 05 Nov, 2020 02:38 PM

    ExtraPunkt's Avatar

    Hallo,

    vielen Dank für die Mail.

    In der Datei gibt es nur den Eintrag 'scroll' anstatt 'resize',
    funktionert aber trotzdem super. 

    Leider wird der Tab etwas von der Navigation überdeckt. Kann ich in dem
    Befehl noch einen Abstand nach oben festlegen? Habe es schon mir
    ScrollTop versucht, aber das funzt nicht.

    Beste Grüße

    Ben

  8. Support Staff 8 Posted by RockSolid Theme... on 05 Nov, 2020 04:07 PM

    RockSolid Themes's Avatar

    In der Datei gibt es nur den Eintrag 'scroll' anstatt 'resize',

    Das würde bedeuten, dass Ihre Theme-Version sehr alt ist. Eventuell kann ein Theme-Update in diesem Fall hilfreich sein.

    Leider wird der Tab etwas von der Navigation überdeckt.

    Anstatt zum Tab-Inhalt zu scrollen können Sie als Alternative zum Tab-Link scrollen damit dieser auch sichtbar ist:

    link.scrollIntoView({behavior: 'smooth'});
    
  9. 9 Posted by ExtraPunkt on 05 Nov, 2020 04:20 PM

    ExtraPunkt's Avatar

    Hallo,

    vielen Dank für die Antwort. Kann schon sein, dass das Theme ewtas älter
    ist .

    Habe es jetzt mit CSS so gelöst, das der Tab-Inhalt im vordergrund
    steht. Nicht perfekt, aber damit kann ich leben.

    Nochmals vielen Dank für die Hilfe.

    Viele Grüße ins schöne Österreich

    Ben

  10. 10 Posted by landzone on 09 Nov, 2020 09:47 AM

    landzone's Avatar

    Möchten Sie über einen anderen Link der sich nicht in der Tab-Navigation befindet auf den Tab verlinken....

    Und was müsste man tun, um dies zu erreichen?

  11. Support Staff 11 Posted by RockSolid Theme... on 09 Nov, 2020 02:43 PM

    RockSolid Themes's Avatar

    Möchten Sie über einen anderen Link der sich nicht in der Tab-Navigation befindet auf den Tab verlinken....

    Und was müsste man tun, um dies zu erreichen?

    Informationen dazu finden Sie in folgendem Beitrag: https://help.rocksolidthemes.com/discussions/contao/12092

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac