Simple and sane sample code for Tabs 1.0

dabblet.css

/**
 * Simple and sane sample code for Tabs 1.0
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

dabblet.html

<!-- 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>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}