SirPepe · April 6, 2012 10:24
diff --git a/dabblet.css b/dabblet.css
 /**
 * Tab-Navigation mit CSS3-Selektoren
 */


 body {
    padding: 2em 0;
 }

 /* Platzierung der Tab-Navigation */
 #tab-box {
    border: 2px solid #000;
    width: 50%;
    margin: 0 auto;
    padding: 8px 32px;
 }

 /* Positionierung der Tabs */
 #tab-box {
    position: relative;
    margin-top: 64px;
 }
 #tab-box > p:last-child {
    position: absolute;
    top: -32px;
    left: 16px;
    margin: 0;
 }
 a, a:link, a:visited, a:hover, a:active {
    display: inline-block;
    padding: 4px 16px;
 }

 /* Content-Switch */
 #tab-box div {
    display: none;
 }
 #tab-box div:target {
    display: block;
 }

 /* Normal-Styling der Tabs */
 a, a:link, a:visited, a:hover, a:active {
    background: #000;
    color: #FFF;
    border: 2px solid #000;
 }

 /* Aktiv-Styling der Tabs */
 #content-alpha:target ~ p:last-child a[href="#content-alpha"],
 #content-beta:target ~ p:last-child a[href="#content-beta"],
 #content-gamma:target ~ p:last-child a[href="#content-gamma"] {
    color: #000;
    background: #FFF;
    border-bottom: 2px solid #FFF;
 }

 /* Gamma zum Start (d.h. per Default) offen */
 a[href="#content-gamma"] {
    color: #000;
    background: #FFF;
    border-bottom: 2px solid #FFF;
 }
 #tab-box #content-gamma {
    display: block;
 }

 /* Gamma-Tab schließen wenn andere offen sind */
 :target ~ p:last-child a[href="#content-gamma"] {
    color: #FFF;
    background: #000;
    border-bottom: 2px solid #000;
 }
 :target ~ #content-gamma {
    display: none !important;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <div id="tab-box">
    <div id="content-alpha">
        <p>Accelerator photo sharing business school drop out ramen hustle crush it revenue traction platforms. Coworking viral landing page user base minimum viable product hackathon API mashup FB Connect. Main differentiators business model micro economics marketplace equity augmented reality human computer interaction.</p>
    </div>
    <div id="content-beta">
        <p>Tablet publishing HTML5 mobile first really simple syndication meetups white board walls. User experience iterate algorithm gamification semantic web value add market research stealth. Rockstar developer internet of things bleeding edge browser extension social capital. Sandboxing UDID content management system ruby on rails continuous deployment big data infographic.</p>
    </div>
    <div id="content-gamma">
        <p>User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying crowded market pivot onboarding freemium prototype ping pong. Early stage disruptive ecosystem community outreach dynamic location based strategic investor. </p>
    </div>
    <p>
        <a href="#content-alpha">Alpha</a>
        <a href="#content-beta">Beta</a>
        <a href="#content-gamma">Gamma</a>
    </p>
 </div>
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Tab-Navigation mit CSS3-Selektoren
	*/


	body {
	padding: 2em 0;
	}

	/* Platzierung der Tab-Navigation */
	#tab-box {
	border: 2px solid #000;
	width: 50%;
	margin: 0 auto;
	padding: 8px 32px;
	}

	/* Positionierung der Tabs */
	#tab-box {
	position: relative;
	margin-top: 64px;
	}
	#tab-box > p:last-child {
	position: absolute;
	top: -32px;
	left: 16px;
	margin: 0;
	}
	a, a:link, a:visited, a:hover, a:active {
	display: inline-block;
	padding: 4px 16px;
	}

	/* Content-Switch */
	#tab-box div {
	display: none;
	}
	#tab-box div:target {
	display: block;
	}

	/* Normal-Styling der Tabs */
	a, a:link, a:visited, a:hover, a:active {
	background: #000;
	color: #FFF;
	border: 2px solid #000;
	}

	/* Aktiv-Styling der Tabs */
	#content-alpha:target ~ p:last-child a[href="#content-alpha"],
	#content-beta:target ~ p:last-child a[href="#content-beta"],
	#content-gamma:target ~ p:last-child a[href="#content-gamma"] {
	color: #000;
	background: #FFF;
	border-bottom: 2px solid #FFF;
	}

	/* Gamma zum Start (d.h. per Default) offen */
	a[href="#content-gamma"] {
	color: #000;
	background: #FFF;
	border-bottom: 2px solid #FFF;
	}
	#tab-box #content-gamma {
	display: block;
	}

	/* Gamma-Tab schließen wenn andere offen sind */
	:target ~ p:last-child a[href="#content-gamma"] {
	color: #FFF;
	background: #000;
	border-bottom: 2px solid #000;
	}
	:target ~ #content-gamma {
	display: none !important;
	}
	<!-- content to be placed inside <body>…</body> -->

	<div id="tab-box">
	<div id="content-alpha">
	<p>Accelerator photo sharing business school drop out ramen hustle crush it revenue traction platforms. Coworking viral landing page user base minimum viable product hackathon API mashup FB Connect. Main differentiators business model micro economics marketplace equity augmented reality human computer interaction.</p>
	</div>
	<div id="content-beta">
	<p>Tablet publishing HTML5 mobile first really simple syndication meetups white board walls. User experience iterate algorithm gamification semantic web value add market research stealth. Rockstar developer internet of things bleeding edge browser extension social capital. Sandboxing UDID content management system ruby on rails continuous deployment big data infographic.</p>
	</div>
	<div id="content-gamma">
	<p>User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying crowded market pivot onboarding freemium prototype ping pong. Early stage disruptive ecosystem community outreach dynamic location based strategic investor. </p>
	</div>
	<p>
	<a href="#content-alpha">Alpha</a>
	<a href="#content-beta">Beta</a>
	<a href="#content-gamma">Gamma</a>
	</p>
	</div>