Last active
April 10, 2017 04:30
-
-
Save fmfer/3339c0e694c4bc0dc931c304c2fd7441 to your computer and use it in GitHub Desktop.
Simple and sane sample code for Tabs 1.0
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Simple and sane sample code for Tabs 1.0 | |
*/ | |
background: #f06; | |
background: linear-gradient(45deg, #f06, yellow); | |
min-height: 100%; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Simple is Beautiful --> | |
<style> | |
/* Tabbed interface Apperance */ | |
.tabLabel { padding:0 0.2em; background:gray;} | |
.tabSelector:checked ~ .tabLabel { background:lightgray;} | |
/* Tabbed interface Logic */ | |
.tabLabel {display:inline;} | |
.tabbedArticle section {display:inline;} | |
.tabbedArticle label { background-color:gray;} | |
.tabSelector {display:none;} | |
.tabContent {display:none;position:absolute;} | |
.tabSelector:checked ~ .tabContent {display:block;} | |
</style> | |
<article class="tabbedArticle"> | |
<section id="tab1" class="tab_block"> | |
<label> | |
<input name="tabsA" type="radio" class="tabSelector" checked/> | |
<span class="tabLabel" >A</span> | |
<div class="tabContent" >aaaa<br>aaaaa<br>aaaaaa</div> | |
</label> | |
</section> | |
<section id="tab2" class="tab_block" value="3"> | |
<label> | |
<input name="tabsA" type="radio" class="tabSelector"/> | |
<span class="tabLabel" >B</span> | |
<div class="tabContent" >bbbb<br>bbbbb<br>bbbbbbb</div> | |
</label> | |
</section> | |
<section id="tab3" class="tab_block"> | |
<label> | |
<input name="tabsA" type="radio" class="tabSelector"/> | |
<span class="tabLabel" >C</span> | |
<div class="tabContent">cccc<br>ccccc<br>ccccccc</div> | |
</label> | |
</section> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment