Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 05.01.2021, 18:41
TwisteD TwisteD ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2021
Beiträge: 1
TwisteD befindet sich auf einem aufstrebenden Ast
Standard Responsive Vertical scrollable Tabs

Hallo zusammen,
bin neu hier und habe gerade eine Frage =)

Ich versuche aktuell TABS zu bauen, welche responsive und vertikal scrollbar sind. Das ganze komplett ohne JavaScript.

Der Inhalt bleibt variabel. Jetzt habe ich nur ein kleines Problem.

Ich hätte gerne das "label" im background farblich hinterlegt, wenn der "TAB" [radio] aktiv ist.
Leider bekomme ich es einfach nicht hin und hoffe auf Hilfe.

Hier der Code:
Code:
<style>
<!--
.search-tab-wrapper{width:100%;margin-left:auto;margin-right:auto}
.search-tab-radio{display:none}
.search-tabs{font-size:0;margin: 0}
.labels{overflow-y:auto;white-space:nowrap}
.labels .search-tab-label{background:#fff;color:#3b505e;border-bottom:3px solid #fff;display:inline-block;font-size:1rem;left:1px;margin-left:-1px;padding:10px 25px 7px;position:relative;vertical-align:bottom}
.labels .search-tab-label:hover{border-bottom:3px solid #00d5e0;color:#00d5e0;cursor:pointer}
.labels .search-tab-label i{display:block;text-align:center;font-size:1.3em;margin-bottom:6px}
.search-tabs .search-tab-panel{display:inline-block;overflow:hidden;position:relative;height:0;width:0}
.search-tabs .search-tab-content{display:block;float:left;font-size:1rem;width:100%;white-space:normal;background:#fff;color:#3b505e;border-top:1px solid #ccc}
span:focus{outline:none}
span:focus > .search-tab-label{background:#c40000!important}
.search-tabs .search-tab [type="radio"]:checked ~ .search-tab-panel{display:inline}
-->
</style>
HTML-Code:
<div class="search-tab-wrapper">
	<div class="labels">
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab1">Tab1</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-0">Tab2</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-1">Tab3</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-2"Tab4</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-3">Tab5</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-4">Tab6</label>
		</span>
	</div>
	<div class="search-tabs">
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
			<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">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt2
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-1" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt3
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-2" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt4
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-3" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt5
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-4" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt6
				</div>
			</div>
		</div>
	</div>
</div>
Evtl. hat hier jemand eine Lösung?
Mit Zitat antworten
Sponsored Links