如何用javascript替换div容器

Question

我必须在javascript中进行一些设计。

我有一个包含5个条目和仅1个HTML页面的菜单。

因此，我将有一个content-div并启用和禁用不同的静态内容，每个菜单项都是另一个内容。 我尝试了5个div并禁用了其中的4个并启用了1，但彼此之间的元素意味着每个div都像
-是否启用，因此“内容”正在移动。

希望它可以理解。

这是到目前为止的代码：

     <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';
}

</script>
</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>

Answer 1

尝试

style.display = 'none';

它将停止影响其他元素的位置和布局。

Answer 2

如果您还没有的话，我建议您检出jQuery以进行DOM操作： http : //jquery.com/ 。 就您而言，是html（）方法http://api.jquery.com/html/或hide（）方法是http://api.jquery.com/hide/ 。

祝好运！

Answer 3

看看Tabtastic可以做到这一点。