Hier mal ein CSS Experiment. Vielleicht hat jemand ja noch eine bessere Idee!?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs mit CSS3 ein Experiment</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
hr {
padding:50px 0;
visibility:hidden;
}
#tabcontainer {
position:relative;
background:#09c;
color:#fff;
width:300px;
height:220px;
margin-left:100px;
}
#tabcontainer a {
float:left;
width:100px;
padding:4px 0;
color:#fff;
background:#000;
text-decoration:none;
text-align:center;
}
#tab1 , #tab2 , #tab3 {
display:none;
}
#tabcontent1 , #tabcontent2 , #tabcontent3 {
position:absolute;
min-height: 190px;
width:300px;
left:-9999px;
top:30px;
background:#09c;
}
#tab1:target ~ #tabcontent1 , #tab2:target ~ #tabcontent2 , #tab3:target ~ #tabcontent3 {
left:0;
}
#tab1:target ~ #tabanker1 , #tab2:target ~ #tabanker2 , #tab3:target ~ #tabanker3 {
background:#09c;
}
h2 , p { padding:5px;}
</style>
</head>
<body>
<hr><hr>
<div id="tabcontainer">
<div>
<span id="tab1"></span>
<a href="#tab1" id="tabanker1" > Tab 1</a>
<div id="tabcontent1">
<h2>Tab 1</h2>
<p>Inhalt von Tab 1</p>
</div>
</div>
<div>
<span id="tab2"></span>
<a href="#tab2" id="tabanker2" > Tab 2</a>
<div id="tabcontent2">
<h2>Tab 2</h2>
<p>Inhalt von Tab 2</p>
</div>
</div>
<div>
<span id="tab3"></span>
<a href="#tab3" id="tabanker3" > Tab 3</a>
<div id="tabcontent3">
<h2>Tab 3</h2>
<p>Inhalt von Tab 3</p>
</div>
</div>
</div>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
</body>
</html>
Alles anzeigen
<hr> dient nur zum Beobachten, um zu zeigen, das die Seite nicht zum Viewport springt.
Funktioniert nicht im IE bis 8. Die per und 10er kann ich nicht testen. Also wer Lust hat kann ja mal gucken.
Beispielhttp://www.gipspferd.de/forumhilfe/tabs/
