<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine Seite</title>
<style type="text/css">
body{
margin:0;
background-color: #999;
font-size:12px;
font-family:"verdana", sans-serif;
}
h1{
font-size:18pt;
font-weight:bold;
font-family:'Verdana', sans-serif;
color:#333;
}
p{
font-size:10pt;
font-family:'Verdana', sans-serif;
font-weight:bold;
margin:5px;
margin-left:0;
color:#333;
}
#header{
width:800px;
height:150px;
background-color:darkblue;
padding:10px;
color:#fff;
margin:1px;
}
#navi{
width:800px;
height:30px;
background-color:blue;
padding:10px;
color:#fff;
margin:1px;
}
#navi a{
color:#fff;
}
#content{
width:800px;
height:400px;
background-color:#ccc;
padding:10px;
color:#000;
margin:1px;
}
.content{
/* Inhalte standardmäßig ausblenden */
display:none;
}
</style>
<script>
<!--
function showPage(pageNr){
content_array = getElementsByClassName('content');
for(i=0;i<content_array.length;i++) {
if(content_array[i].id == "page"+pageNr){
content_array[i].style.display = 'block';
}else{
content_array[i].style.display = 'none';
}
}
}
function getElementsByClassName(class_name)
{
var all_obj,ret_obj=new Array(),j=0,teststr;
if(document.all)all_obj=document.all;
else if(document.getElementsByTagName && !document.all)
all_obj=document.getElementsByTagName("*");
for(i=0;i<all_obj.length;i++)
{
if(all_obj[i].className.indexOf(class_name)!=-1)
{
teststr=","+all_obj[i].className.split(" ").join(",")+",";
if(teststr.indexOf(","+class_name+",")!=-1)
{
ret_obj[j]=all_obj[i];
j++;
}
}
}
return ret_obj;
}
//-->
</script>
</head>
<body>
<div id="header">
Header
</div>
<div id="navi">
Hier dein Flash Menü<br>
<a href="javascript:showPage(1);">Link 1</a> |
<a href="javascript:showPage(2);">Link 2</a> |
<a href="javascript:showPage(3);">Link 3</a> |
<a href="javascript:showPage(4);">Link 4</a> |
<a href="javascript:showPage(5);">Link 5</a> |
</div>
<div id="content">
<div class="content" id="page1" style="display:block;">
<h1>Inhalt für Seite 1.</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="content" id="page2">
<h1>Inhalt für Seite 2.</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="content" id="page3">
<h1>Inhalt für Seite 3.</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="content" id="page4">
<h1>Inhalt für Seite 4.</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="content" id="page5">
<h1>Inhalt für Seite 5.</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</body>
</html>
