Hallo, ich versuche eine Website zu erstellen die nur aus einer HTML-Seite besteht, aber, wenn man einen Link anklickt dass anderer Text erscheint und der Text der vorher darin war verschwindet. Das ist der bisherige Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html { overflow-y:scroll; }
body {
width: 800px;
height: 520px;
margin: 0 auto;
padding: 5px;
position: 50%; height: 100%
border: 1px solid black;
-moz-border-radius: 1px;
padding-bottom:0;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
#content {
overflow-y: scroll;
height: 150px;
width: 420px;
margin: 0 auto;
margin-top: 200px;
margin-bottom: 30px;
}
#footer {
text-align: center;
color: gray;
margin-bottom: 0;
}
#nav {
margin-left: 150px;
}
#nav ul { list-style: none; }
#nav ul li {
height: 20px;
line-height: 20px;
text-align: center;
position: relative;
float:left;
padding: 5px;
margin-left:1px;
background: -moz-linear-gradient( bottom, #000, #fff );
}
#nav ul li:hover {
color:white;
background: -moz-linear-gradient( top, #000, #fff );
}
#nav ul li:nth-child(6) { display:none;}
#nav ul li:nth-child(7) { display:none;}
#nav ul li a {
text-decoration: none;
color: black;
}
.content-item { display:none; }
noscript { color: red; font-size:large; text-align:center; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#index-a').click(function(){$('#index').show("slow")});
$('#konf-a').click(function(){$('#konfliktberatung').show("slow")});
$('#med-a').click(function(){$('#mediation').show("slow")});
$('#ueber-a').click(function(){$('#ueber-mich').show("slow")});
});
</script>
</head>
<body>
<div id="header">
<h1>Header</h1>
<div id="nav">
<ul>
<li><a href="#" id="index-a">Home</a></li>
<li><a href="#" id="konf-a">Konfliktberatung</a></li>
<li><a href="#" id="med-a">Mediation</a></li>
<li><a href="#" id="ueber-a">Über mich</a></li>
<li><a href="#">Kontakt</a></li>
<li></li>
<li></li>
</ul></div>
</div>
<div id="content">
<div class="content-item" style="display:block;" id="index">
<h2>Startseite</h2>
</div>
<div class="content-item" id="konfliktberatung">
<h2>Konfliktberatung</h2>
</div>
<div class="content-item" id="mediation">
<h2>Mediation</h2>
</div>
<div class="content-item" id="ueber-mich">
<h2>Über mich</h2>
</div>
</div>
<noscript>
Bitte aktiviere JavaScript in deinem Browser umd diese Seite anzeigen zu können.
</noscript>
<div id="footer">
<p>Impressum</p>
</div>
</body>
</html>