Ayama
Enthusiast
So I'm currently playing around with tabs, and I can't seem to get them to show up one next to the other (like tabs should be) instead of one on top of the other :/ Does anyone know what I'm missing? Here's what I have so far:
Code:
[nobr]
[class=tabs]
box-shadow: 0px 0px 5px #000088;
box-sizing: border-box;
border-style: solid;
border-radius: 2px;
border-color: #000000;
margin: 10px auto;
width: 200px;
[/class]
[class=tab]
padding: 5px 0;
box-sizing: border-box;
border-style: solid;
border-radius: 2px;
border-color: #ba4a00;
[/class]
[class name=tab state=hover]
background-color: #d0d3d4;
[/class]
[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Tab1) (show tabsContentTab1)
if (eq ${currentTab} Tab2) (show tabsContentTab2)
[/script]
[div class=tabs][div class=tab style="color: #82e0aa;"]Tab1[/div][div class=tab style="color: #d7bde2;"]Tab2[/div][/div]
[div class="tabsContent tabsContentTab1"]Tab1 contents.[/div]
[div class="tabsContent tabsContentTab2"]Tab2 contents.[/div]
[/nobr]