change the tab to selected style

dabblet.css

.hiddenTarget {
	display:none;
	position:fixed;
}
.tabbedPages {
	position:relative;
	margin:50px 0;
}
ul.tabs {
	padding:0;
	margin:0;
	list-style:none;
	float:left;
	position:relative;
	z-index:100;
}
ul.tabs li {
	float:left;
	margin-right:2px;
}
ul.tabs li a {
	display:block;
	font:normal 12px/30px arial, sans-serif;
	border:1px solid #aaa;
	border-radius:5px 5px 0 0;
	background:#69c;
	padding:0 20px;
	text-decoration:none;
	color:#fff;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
	background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
	background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
	background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
	background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}

.tabcontent {
	float:left;
	width:700px;
	padding:20px;
	border:1px solid #aaa;
	border-radius:0 5px 5px 5px;
	background:#fff;
	position:relative;
	z-index:10;
	display:none;
	clear:left;
	top:-1px;
 	box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontent p {
	padding:0 0 5px 0;
	margin:0;
	font:normal 12px/20px arial, sans-serif;
	color:#333;
}
.tabcontent h4 {
	padding:0 0 10px 0;
	margin:0;
	font:bold 14px/25px arial, sans-serif; color:#000;
}
.tabcontent img {
	border:1px solid #444;
	display:block;
	float:left;
	margin:0 20px 0 0;
	box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}

/* change the tab to selected style */
ul.tabs li a.default,
#tab1:target ~ .tabbedPages .tabs li a.default,
#tab2:target ~ .tabbedPages .tabs li a.tab2,
#tab3:target ~ .tabbedPages .tabs li a.tab3,
#tab4:target ~ .tabbedPages .tabs li a.tab4,
#tab5:target ~ .tabbedPages .tabs li a.tab5 {background-color:#fff; border-bottom:1px solid #fff; color:#000;}

/* show the tab content */
div.default,
#tab1:target ~ .tabbedPages div.default,
#tab2:target ~ .tabbedPages div#view2,
#tab3:target ~ .tabbedPages div#view3,
#tab4:target ~ .tabbedPages div#view4,
#tab5:target ~ .tabbedPages div#view5 {display:block;}

/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default,
#tab3:target ~ .tabbedPages .tabs li a.default,
#tab4:target ~ .tabbedPages .tabs li a.default,
#tab5:target ~ .tabbedPages .tabs li a.default {background-color:#69c; border:1px solid #888; color:#fff;}

/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default,
#tab3:target ~ .tabbedPages div.default,
#tab4:target ~ .tabbedPages div.default,
#tab5:target ~ .tabbedPages div.default {display:none;}

.clear {clear:left;}

dabblet.html

<b id="tab1" class="hiddenTarget"></b>
<b id="tab2" class="hiddenTarget"></b>
<b id="tab3" class="hiddenTarget"></b>
<b id="tab4" class="hiddenTarget"></b>
<b id="tab5" class="hiddenTarget"></b>
<div class="tabbedPages">
	<ul class="tabs">
		<li><a href="#tab1" class="default tab1 tabpages">Tab One</a></li>
		<li><a href="#tab2" class="tab2 tabpages">Tab #2</a></li>
		<li><a href="#tab3" class="tab3 tabpages">Tab No.3</a></li>
		<li><a href="#tab4" class="tab4 tabpages">The Fourth Tab</a></li>
		<li><a href="#tab5" class="tab5 tabpages">Any Content</a></li>
	</ul>
	<div id="view1" class="tabcontent default">
		<h4>Tab 'persist'</h4>
		<p>The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.</p>
	</div>
	<div id="view2" class="tabcontent">
		<h4>Multiple Tabs</h4>
		<p>You can have multiple tabs on the same page, with only one copy of the CSS (javascript is not required).</p>
	</div>
	<div id="view3" class="tabcontent">
		<h4>Tab Action from elsewhere on the same page.</h4>
		<p>You can also open a tab using links elsewhere on the same page.</p>
		<p>If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.</p>
	</div>
	<div id="view4" class="tabcontent">
		<h4>Opened by a link from another page</h4>
		<p>Link from another page can select a tab on the target page when loaded.</p>
	</div>
	<div id="view5" class="tabcontent">
		<h4>No restrictions on tab content</h4>
		<img src="http://media.moddb.com/images/downloads/1/13/12402/thumbs-up.jpg" alt="Picture" />
		<p>Some text.</p>
		<p>Some other text.</p>
		<br />
		<p>&copy 2007-2012 vaLinBSD.org</p>
	</div>
</div>
<br class="clear">
<p>You can open the second tab by clicking here <a href="#tab2" class="tabpages">OPEN #2</a></p>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}