How to replace a div container with javascript
I must have a little design in javascript.
I have a menu with 5 entrys and only 1 HTML-page.
So I will have a content-div and enabled and disabled different static content in it, each menu-entry is another content. I tried with 5 divs and disable 4 of them and enable 1, but the element under each other means every div is like a
- enabled or not, so the "content" is moving then.Hope its understandable.
Here is the code so far:
<html><head><title>Des Einsame-Katerchen's kleine Homepage</title>
<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:blue; text-decoration:none; }
a:focus { font-weight:bold; color:blue; text-decoration:none; }
a:hover { font-weight:bold; color:blue; text-decoration:line-through; }
a:active { font-weight:bold; color:blue; text-decoration:none; }
h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }
</style>
<script>
function an(id)
{
document.getElementById('start').style.visibility = 'hidden';
document.getElementById('start').style.height = '0px';
document.getElementById('me').style.visibility = 'hidden';
document.getElementById('me').style.height = '0px';
document.getElementById('rpg').style.visibility = 'hidden';
document.getElementById('rpg').style.height = '0px';
document.getElementById('musik').style.visibility = 'hidden';
document.getElementById('musik').style.height = '0px';
document.getElementById('screens').style.visibility = 'hidden';
document.getElementById('screens').style.height = '0px';
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.height = '500px';
}
</sc开发者_如何学运维ript>
</head>
<body style=" " >
<div style="width=100%; text-align:center; border: 1px red solid; height:40px;">
<div style="float:left; width:100px;"><a href="#" OnClick="an('start')" >Startseite</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('me')" >Über mich</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('rpg')" >RPG-Chars</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('musik')" >Musik</a></div>
<div style="float:left; width:150px;"><a href="#" OnClick="an('screens')" >Knuddels-Screens</a></div>
</div>
<br>
<div id="start" style="border:1px red solid; width:500px; height:500px; overflow: visible; " >
a
</div>
<div id="me" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
b
</div>
<div id="rpg" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
c
</div>
<div id="musik" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
d
</div>
<div id="screens" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
e
</div>
</body>
Try
style.display = 'none';
It will stop affecting other elements place and layouting.
If you haven't already, I would recommend checking out jQuery for DOM manipulation: http://jquery.com/. In your case, the html() method, http://api.jquery.com/html/, or the hide() method, http://api.jquery.com/hide/.
Good luck!
Take a look at Tabtastic for a decent implementation of this.
加载中,请稍侯......
精彩评论