Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 06.01.2021, 14:30
top top ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 3
top befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links