如何用javascript替换div容器
我必须有一个小的javascript设计 我有一个5个入口的菜单，只有一个HTML页面 所以我将有一个contentdiv，并在其中启用和禁用不同的静态内容，每个菜单项都是另一个内容。 我试过使用5个div，禁用其中4个，启用1个，但每个div下的元素都表示每个div都像一个启用或不启用的div，因此“内容”正在移动 希望这是可以理解的 以下是迄今为止的代码：如何用javascript替换div容器,javascript,html,Javascript,Html,我必须有一个小的javascript设计 我有一个5个入口的菜单，只有一个HTML页面 所以我将有一个contentdiv，并在其中启用和禁用不同的静态内容，每个菜单项都是另一个内容。 我试过使用5个div，禁用其中4个，启用1个，但每个div下的元素都表示每个div都像一个启用或不启用的div，因此“内容”正在移动 希望这是可以理解的 以下是迄今为止的代码： <html><head><title>Des Einsame-Katerchen's kl
<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>
Des Einsame Katerchen的kleine主页
链接{字体大小：粗体；颜色：蓝色；文本装饰：无；}
a:已访问{字体重量：粗体；颜色：蓝色；文本装饰：无；}
a:焦点{字体大小：粗体；颜色：蓝色；文本装饰：无；}
a:悬停{字体大小：粗体；颜色：蓝色；文本装饰：线穿过；}
a:活动{字体重量：粗体；颜色：蓝色；文本装饰：无；}
h1：焦点{背景色：红色；}
h1：悬停{背景色：银色；}
h1:活动{背景色：绿色；}
函数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'；
}
A.
B
C
D
E
style.display = 'none';
style.display = 'none';
它将停止影响其他元素的放置和布局。如果您还没有，我建议您检查jQuery以进行DOM操作：。在您的例子中，html（）方法或hide（）方法
祝你好运 如果您还没有，我建议您签出jQuery进行DOM操作：。在您的例子中，html（）方法或hide（）方法
祝你好运 在CSS术语中，display的默认值是“static”。而
块块