Happy 2nd Advent:

Markup:
Html:
<section class="wrap"> 
	<input type="radio" name="tab" id="lorem"> 
	<input type="radio" name="tab" id="ipsum"> 
	<input type="radio" name="tab" id="dolor"> 
	
	<label class="tab-hl" for="lorem">lorum</label> 
	<label class="tab-hl" for="ipsum">ipsum</label> 
	<label class="tab-hl" for="dolor">dolor</label> 
	
	<article class="tab"> 
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. a</p> 
	</article> 
	<article class="tab"> 
		<h4>Ipsum</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. b</p> 
	</article> 
	<article class="tab"> 
		<h4>Dolor</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. c</p> 
	</article> 
</section>
An und für sich, nichts besonderes. Drei Radio-Buttons mit entsprechenden Labeln, die die Ueberschriften des Contentinhaltes darstellen. Zu guter letzt ein bisschen Content ( Inhalt ) der jeweils in einem Articel eingeschlossen ist und eine Ueberschrift h4 und ein bisschen Text (p) in sich birgt. Die section und articel - Bereiche lassen sich auch durch Divisionen (div) ersetzen. Soviel dazu.

Jetzt zum noetigen CSS:
Html:
<style>
	section, article { display: block }
	
	.wrap { width: 600px; margin: 10px auto; }
	
	.tab, input { display: none; }
	
	.tab-hl { cursor: pointer; display: inline-block; padding-left: 5px; text-decoration: underline; }

1 Zeile: section -und articlebereiche als blockelemente darstellen, falls sie verwendet werden.
2 Zeile: dient eigentlich nur der Optischen darstellung des Inhaltsconteiners und sorgt dafür, dass das in der mitte dargestellt wird.
3 Zeile: die Radiobuttions (input) und der Contentbereich (.tab) werden ersteinmal versteckt.
4. Fuer die Ueberschriften, wird der Mauszeiger zu einem Pointer umgewandelt, damit man einen visuellen Hinweis darauf hat, dass hier eine Interaktion moeglich ist - in unserem Fall ist es das klicken. Danach werden die Ueberschriften horizontal positioniert ( display: inline-block ) und ein Abstand zueinander generiert (padding-left: 5px). Zu letzt kommt nur nur ein Aufhuebschungseffekt, der dafuer sorgt, dass die Ueberschriften unterstrichen werden ( text-decoration: underline ).

So jetzt kommen wir zum eigentlichen wulla-wulla Magic-Trick:
Html:
	.wrap input:nth-of-type(2):not(:checked) ~ input:nth-of-type(3):not(:checked) ~ .tab:nth-of-type(1),
	.wrap input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
	.wrap input:nth-of-type(3):checked ~ .tab:nth-of-type(3) { display: block; }
--></style>
Dieser Abschnitt sorgt dafür, dass beim druecken der jeweiligen Überschriften, der entsprechende Inhalt angezeigt wird. Ausschlaggebend sind die Pseudoelemente nthof-type, checked und :not.

Mehr gibt es dazu eigentlich nicht zu erzählen. Das muesste in allen aktuellen Browsern funktionieren.

Alles auf einen Blick:
Warnung! Spoiler!
Html:
<style><!--
	
	section, article { display: block }
	
	.wrap { width: 600px; margin: 10px auto; }
	
	.tab, input { display: none; }
	
	.tab-hl { cursor: pointer; display: inline-block; padding-left: 5px; text-decoration: underline; }

	.wrap input:nth-of-type(2):not(:checked) ~ input:nth-of-type(3):not(:checked) ~ .tab:nth-of-type(1),
	.wrap input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
	.wrap input:nth-of-type(3):checked ~ .tab:nth-of-type(3) { display: block; }
	
	br {display: none; visibility: hidden;}
--></style>

<section class="wrap"> 
	<input type="radio" name="tab" id="lorem"> 
	<input type="radio" name="tab" id="ipsum"> 
	<input type="radio" name="tab" id="dolor"> 
	
	<label class="tab-hl" for="lorem">lorum</label> 
	<label class="tab-hl" for="ipsum">ipsum</label> 
	<label class="tab-hl" for="dolor">dolor</label> 
	
	<article class="tab"> 
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. a</p> 
	</article> 
	<article class="tab"> 
		<h4>Ipsum</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. b</p> 
	</article> 
	<article class="tab"> 
		<h4>Dolor</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. c</p> 
	</article> 
</section>