Problem mit Tabdarstellung

  • Hallo liebe Blogger,

    auf meiner Internetseite http://www.folien-berlin.de habe ich ein problem mit der Tabdarstellung.

    Ich habe eine Beispielseite: http://folien-berlin.de/leistungen/energiesparfolien/

    dort sind auf der linken Seite Tabs angeordnet. Eigentlich sollte der Tab (Anwendungsbereich) automatisch zu Beginn angezeigt werden. Wird er auch, aber leider ohne Tabinhalt.

    Erst wenn ich auf den Tab darunter klicke und dann wieder auf (Anwendungsbereich) erscheint der Artikel.

    Hat Jemand vielleicht eine Idee, wie ich das hinbekommen kann, dass der Inhalt des ersten Tabs sofort angezeigt werden kann?

    Vielen Vielen Dank

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hi,

    ich hab mir das gerade mal angesehen und denke es handelt sich um ein Problem mit dem Plugin. Wenn man einen Tab auswählt wird er über das Plugin via jQuery mit der class 'active' versehen. Dann wird die CSS-Anweisung, welche alle Texte die kein active haben ausblendet überschrieben und der entsprechende Text sichtbar gemacht. Nun ist es so, dass der erste Tab von Anfang an auf active stehen sollte, tut er aber nicht. Schau mal in den Einstellungen des Plugins, ob man da nicht etwas entsprechendes setzen kann. Welches Plugin verwendest du?

  • hey, das ist kein plugin sondern mein theme. das theme nennt sich nennt sich nur ,,x" und ist von [COLOR=#333333][FONT=sans-serif]Anonymous.

    das gute ist, ich kann dort beliebig css codes einfügen. ich denke vielleicht, dass es was mit:

    [/FONT][/COLOR][COLOR=#ff0000]x-tab-content > .active {[/COLOR]
    [COLOR=#ff0000] display: block;[/COLOR]
    [COLOR=#ff0000]}[/COLOR]
    [COLOR=#ff0000].x-tab-content > .x-tab-pane {[/COLOR]
    [COLOR=#ff0000] display: none;[/COLOR]
    [COLOR=#ff0000]}
    [/COLOR]

    zu tun hat?
    [COLOR=#333333][FONT=sans-serif]

    [/FONT][/COLOR]

  • Hey, sry weil so lange gedauert hat...
    Mit dem Teil der css, den du gepostet hast, hat das tatsächlich zu tun, allerdings liegt dort wie gesagt nicht das Problem. In der einen Regel mit dem 'display:block' steht ein active wie du siehst, in der mit dem 'display:none' nicht. Letztere Regel blendet alle nicht ausgewählten Beiträge aus. Immer wenn ein Beitrag ausgewählt wird, wird per javascript die class 'active' an diesen Beitrag vergeben.
    Die ist aber am Anfang nirgendwo gesetzt, sodass nichts angezeigt wird. Versuch mal dem 1. Beitrag die class 'active' zu geben, dann klappt es. :)

  • Was ich eigl. meint war, dass du versuchst direkt da wo der HTML-Code zu diesen Tab erstellt wird die class active zu vergeben. Andererseits kannst du auch mal versuchen diesen jQuery-Code zu benutzen:
    [COLOR=#333333][FONT=source-code-pro]
    jQuery( document ).ready([/FONT][/COLOR][COLOR=#333333][FONT=source-code-pro]function[/FONT][/COLOR][COLOR=#333333][FONT=source-code-pro]() {
    [/FONT][/COLOR][COLOR=#0080FF][FONT=Consolas]jQuery("#tab-1").attr("class", "x-tab-pane fade active in");[/FONT][/COLOR]
    });


    [COLOR=#333333]
    Oder deinen Code, aber mit dem richtigen selector:
    [/COLOR][COLOR=#333333]document.getElementById("#tab-1").class = "active";[/COLOR]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!