Moin,
ein ähnliches Problem hatte ich letztens auch.
Ohne JS sah ich nur den Weg die HTML-Struktur so zu ändern, dass das entsprechende Label-Feld erst nach dem dazugehörigen Input-Feld im Quelltext steht.
Entweder so:
HTML-Code:
<div class="search-tab-wrapper">
<div class="search-tabs">
<div class="search-tab">
<input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
<label class="search-tab-label" for="search-tab1">Tab1</label>
<div class="search-tab-panel">
<div class="search-tab-content">
Inhalt1
</div>
</div>
</div>
<div class="search-tab">
<input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
<label class="search-tab-label" for="search-tab2-0">Tab2</label>
<div class="search-tab-panel">
<div class="search-tab-content">
Inhalt2
</div>
</div>
</div>
...
Vom Prinzip her habe ich das für die FAQ-Felder auf dieser Seite umgesetzt:
https://balancecoaching.de/faq.html
(Auch wenn es hier Checkboxen und keine Radioboxen sind.)
Oder (falls du deine Labels der Einfachheit halber in einer Gruppe bündeln möchtest) du setzt erst mal alle Input-Felder folgendermaßen vor die Elemente, die du damit beeinflussen willst:
HTML-Code:
<div class="search-tab-wrapper">
<input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
<input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
<input class="search-tab-radio" type="radio" id="search-tab2-1" name="search-tabs-main">
<input class="search-tab-radio" type="radio" id="search-tab2-2" name="search-tabs-main">
<input class="search-tab-radio" type="radio" id="search-tab2-3" name="search-tabs-main">
<input class="search-tab-radio" type="radio" id="search-tab2-4" name="search-tabs-main">
<div class="labels">
<label class="search-tab-label" for="search-tab1" tabindex="0">Tab1</label>
<label class="search-tab-label" for="search-tab2-0" tabindex="0">Tab2</label>
<label class="search-tab-label" for="search-tab2-1" tabindex="0">Tab3</label>
<label class="search-tab-label" for="search-tab2-2" tabindex="0">Tab4</label>
<label class="search-tab-label" for="search-tab2-3" tabindex="0">Tab5</label>
<label class="search-tab-label" for="search-tab2-4" tabindex="0">Tab6</label>
</div>
<div class="search-tabs">
<div class="search-tab">
<div class="search-tab-panel">
<div class="search-tab-content">
Inhalt1
</div>
</div>
</div>
<div class="search-tab">
<div class="search-tab-panel">
<div class="search-tab-content">
Inhalt2
</div>
</div>
</div>
...
Bei der Lösung musst du allerdings für die maximal mögliche Anzahl an Feldern entsprechend viele verschachtelte Selektoren vorhalten:
HTML-Code:
<style type="text/css">
.search-tab-wrapper input:nth-of-type(1):checked ~ div.labels > label:nth-of-type(1),
.search-tab-wrapper input:nth-of-type(2):checked ~ div.labels > label:nth-of-type(2),
.search-tab-wrapper input:nth-of-type(3):checked ~ div.labels > label:nth-of-type(3)
/* usw.*/ {
/* Style-Angaben */
}
.search-tab-wrapper input:nth-of-type(1):checked ~ div.search-tabs > div:nth-of-type(1),
.search-tab-wrapper input:nth-of-type(2):checked ~ div.search-tabs > div:nth-of-type(2),
.search-tab-wrapper input:nth-of-type(3):checked ~ div.search-tabs > div:nth-of-type(3)
/* usw.*/ {
/* Style-Angaben */
}
</style>
Auf die Art hatte ich hier die Info-Felder umgesetzt:
https://www.parkhaus-huexstrasse.de/
Viel Erfolg,
top
PS: Ich hoffe es ist in Ordnung, wenn ich gleich bei meinem erstem Beitrag zwei Links gesetzt habe. :roll:
|