|
|||
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> |
Sponsored Links |
|
|||
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> ... 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> ... 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> 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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navi Tabs lassen sich nicht positionieren | roman | CSS | 8 | 10.04.2014 15:31 |
Kundeninteresse an Responsive Layout | heiko_rs | Offtopic | 18 | 24.05.2013 14:37 |
CSS Tabs | SoontirFel | CSS | 10 | 22.10.2012 15:17 |
Positionierung funktioniert nicht innerhalb von Jquery's Scrollable | japanworm | CSS | 14 | 12.09.2011 11:47 |
Tabs mit CSS - Problem mit IE6 | crush41 | CSS | 2 | 01.02.2008 15:48 |