Hier mal noch ne Javascript DHTML Variante:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body
{
font: arial, verdana, sans-serif;
text-align: center;
color: black;
background-color: CCCCFF;
}
#container
{
margin: 1em auto;
width: 800px;
height: 600px;
text-align: left;
background-color: red;
border: 1px solid black;
}
#header
{
margin: 0em auto;
width: 800px;
height: 100px;
text-align: left;
background-color: blue;
border: 1px solid black;
}
.content
{
margin-right: 20px;
margin-left: 20px;
margin: -25em auto;
float: right;
width: 530px;
height: 400px;
text-align: left;
background-color: yellow;
border: none;
visibility:visible;
}
#space
{
margin: -25em auto;
float: right;
width: 10px;
height: 400px;
background-color: red;
border: none;
}
#menu
{
margin-left: 10px;
width: 250px;
height: 400px;
text-align: left;
background-color: green;
border: none;
}
#footerspace
{
width: 798px;
height: 68px;
background-color: red;
}
#footer
{
clear: both;
width: 798px;
height: 30px;
background-color: pink;
}
</style>
<script type="text/javascript">
function HandleContentDiv(connum) {
maxdiv = 5;
for (i=0;i<=maxdiv;i++) {
if (i==connum) {
document.getElementById('content'+i).style.visibility ="visible";
} else {
document.getElementById('content'+i).style.visibility ="hidden";
}
}
}
</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu">
<br>
<a href="#" onClick="HandleContentDiv(0)">Home</a><br><br>
<a href="#" onClick="HandleContentDiv(1)">Seite 1</a><br><br>
<a href="#" onClick="HandleContentDiv(2)">Seite 2</a><br><br>
<a href="#" onClick="HandleContentDiv(3)">Seite 3</a><br><br>
<a href="#" onClick="HandleContentDiv(4)">Seite 4</a><br><br>
<a href="#" onClick="HandleContentDiv(5)">Seite 5</a><br><br>
</div>
<div class="content" id="content1"><p>Ich bin die <b>erste Seite</b></p></div>
<div class="content" id="content2"><p>Ich bin die <b>zweite Seite</b></p></div>
<div class="content" id="content3"><p>Ich bin die <b>dritte Seite</b></p></div>
<div class="content" id="content4"><p>Ich bin die <b>vierte Seite</b></p></div>
<div class="content" id="content5"><p>Ich bin die <b>fünfte Seite</b></p></div>
<div class="content" id="content0"><p>Ich bin die <b>Startseite</b></p></div>
<div id="space"></div>
<div id="footerspace"></div>
<div id="footer"></div>
</div> <!-- /container -->
</body>
</html>