• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Tab-Menu (displayed: none;) content... WIEDER SICHTBAR MACHEN

NETrix

Neues Mitglied
Hallo HTML-Gemeinde...

beim erstellen eines Tab-Menus, inkl. content, will es mir nicht mehr gelingen, den zuvor versteckten Inhalt ( display: none; ) wieder zu aktivieren ( display: block; ).
Ich bin mir im Code keinen Fehler bewusst, was mich zum Verzweifeln bringt.

Ich hab den Code, zur Ansicht, mal hochgeladen, vielleicht wisst ihr warum der Browser mir den Inhalt von #tab1 ~ #tab1-content nicht wieder darstellt, obwohl ich in Zeile 205,206,CSS den Browser dazu aufgefordert habe...

In CSS-Zeile 55,56... verstecke ich den Inhalt
und in CSS-Zeile 205,206 möchte ich den Inhalt wieder frei geben,
vorerst nur für #tab1...
aber der Browser reagiert nicht auf die wieder sichtbarkeit des Inhaltes...

WO IST DER FEHLER DABEI... ICH BIN MIR KEINEN BEWUSST...


https://jsfiddle.net/Codrix/fe8z37ev/2/


Vielen dank schon mal im Voraus an Euch...

LG
 
Werbung:
Zeile 172
div.tab-menu-content input[type=radio] {
display: none;
}

Zeile 196...
article.tab-content {
display: none;
}
wenn ich die Beiden deaktiviere, wird #tab1 und #tab1-content wieder angezeigt.
 
Z172 & Z196 (display: none) sind auch richtig... ich will den gesamten content ausblenden, um dann ab

Z205,206
( input#tab1:checked ~ article#tab1-content { display: block;} )

wollte ich anfangen die einzelnen Tabs durch "checked" zu aktivieren.
Aber der Browser reagiert nicht, obwohl ich den Code für richtig halte...

Die Frage ist... warum nicht er den oben liegenden snippet nicht an?
 
Werbung:
Ja... habe das auch nur angemerkt, da du in deinem Anfangstpost geschrieben hast
In CSS-Zeile 55,56... verstecke ich den Inhalt
Damit konnte ich zunächst nichts anfangen.
Ich habe allerdings auch keine Lösung für deine Frage - mir sind nur 2 Dinge aufgefallen, ob das allerdings zur Lösung beiträgt, weiß ich nicht.
1. in Zeile 196 setzt du 'article.tab-content' auf display:none;
dann aber versuchst du, 'article#tab1-content' auf display: block zu setzen... der ist ja gar nicht ausgeblendet, sondern dessen Elternelement(?).
2. In den normalerweise zuverlässigen Publikationen (w3school & Co) finde ich immer wieder sowas wie input[type="radio"], wenn versucht wird auf Radiobuttons Bezug zu nehmen.

aber auch, wenn ich diesen Gedanken weiter spinne und alles mögliche ausprobiere, für dein Problem hatte das keinen Erfolg.
Dass eigentlich alles richtig ist mit deinem Code, zeigt mir ja schon der Fakt, dass je nach Auswahl an den Radios, der Code aus Zeile 199 'div#tab-menu [id^="tab"]:checked + label' funktioniert.
.. aber vielleicht ist das mit dem +lable mehr der Standard. ~ article#tab1-content dann die Kür.
Wünsch dir auf jeden Fall viel Erfolg beim weiter suchen, wenn es funktioniert ist das eine sehr interessante Funktion.
 
Werbung:
Zurück
Oben