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 for DOM操作：http://jquery.com/。在您的情况下，html（）方法，http://api.jquery.com/html/或hide（）方法，http://api.jquery.com/hide/。

祝你好运！

Answer 3

看看Tabtastic是否可以实现这一目标。

如何用javascript替换div容器

3 个答案: