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

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

NETrix

Neues Mitglied
28 Mai 2017
13
1
3
44
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
 

Sailor

Aktives Mitglied
14 Juli 2017
512
67
28
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.
 

NETrix

Neues Mitglied
28 Mai 2017
13
1
3
44
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Das input-Element liegt im div #tab-menu während das content-Element im div#tab-content liegt. Daher sind beide keine Siblings und die Adressierung über "~" funktioniert nicht. Um ein content-div zu adressieren, müsstest Du zunächst vom input zum Elternelement #tab-menu aufwärts gehen, was mit CSS nicht möglich ist. Abhilfe, indem Du die input-Elemente eine Stufe höher legst, so dass sie siblings von #tab-content sind.

Edit: Für die ersten beiden Tabs habe ich es mal umgeändert:
https://jsfiddle.net/Sempervivum/fe8z37ev/10/
 
Zuletzt bearbeitet:
  • Like
Reaktionen: NETrix

Sailor

Aktives Mitglied
14 Juli 2017
512
67
28
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.
 
  • Like
Reaktionen: NETrix