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?