How to replace a div container with javascript_问答_开发者

How to replace a div container with javascript

开发者 https://www.devze.com 2022-12-25 09:25 出处：网络

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

相关专题：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.