JavaScript怎么实现层的显示和隐藏？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript怎么实现层的显示和隐藏？相关的知识，希望对你有一定的参考价值。
首先页面打开后后显示一层中的内容，当点击一个连接后再显示另一个层？求一个范例代码去？
参考技术A var oDiv = ;//[your div] 可以用document.getElementById("IDNAME");oDiv.style.visibility = "visible|hidden"; // 显示或者隐藏,hidden会保留div的位置,会显示一块空白
oDiv.style.display = "block|inline|none";//换行显示\同行显示\不显示.none不会保留div的位置,会由其他div自动填充原来的位置
//none 和 visible 取决于你的上下文. 参考技术B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ansi" />
<title>Jay Skript And The Domsters: About the band</title>
<style type="text/css">
.sectionwidth:560px;border:black solid 1px;
#jaybackground-color:#ccc;
#domstersbackground-color:#eee;
</style>
<script type="text/javascript">
function addLoadEvent(func)
var oldonload = window.onload;
if (typeof window.onload != 'function')
window.onload = func;
else
window.onload = function()
oldonload();
func();
function showSection(id)
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++ )
if (divs[i].className.indexOf("section") == -1) continue;
if (divs[i].getAttribute("id") != id)
divs[i].style.display = "none";
else
divs[i].style.display = "block";
function prepareInternalnav()
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("internalnav")) return false;
var nav = document.getElementById("internalnav");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++ )
var sectionId = links[i].getAttribute("href").split("#")[1];
if (!document.getElementById(sectionId)) continue;
document.getElementById(sectionId).style.display = "none";
links[i].destination = sectionId;
links[i].onclick = function()
showSection(this.destination);
return false;
addLoadEvent(prepareInternalnav);
</script>
</head>
<body>
<div id="content">
<h1>About the band</h1>
<ul id="internalnav">
<li><a href="#jay">第一段</a></li>
<li><a href="#domsters">第二段</a></li>
</ul>
<div class="section" id="jay">
<h2>第一段</h2>
<p>Jay Skript is going to rock your world!</p>
<p>Together with his compatriots The Domsters, Jay is set for world domination. Just you wait and see.</p>
<p>Jay Skript has been on the scene since the mid nineties. His talent hasn't always been recognized or fully appreciated. In the early days, he was often unfavorably compared to bigger, similarly-named artists. That's all in the past now.</p>
</div>
<div class="section" id="domsters">
<h2>第二段</h2>
<p>The Domsters have been around, in one form or another, for almost as long. It's only in the past few years that The Domsters have settled down to their current, stable line-up. Now they're a rock-solid bunch: methodical and dependable.</p>
</div>
</div>
</body>
</html>本回答被提问者采纳
DIV层显示隐藏
在页面里放了 8个DIV层 第一个打开网页就显示了，其他隐藏了用的是 display=“none”；
有弄了两个按钮 ，一个是点击的功能是 将第一个隐藏，显示第二个，再那该按钮隐藏第二个
显示第三个，以此类推。
第二个按钮就是返回，比如：到最后一个DIV层 返回，就显示第7 个隐藏第8 个DIV
大至就是这个点击事件 如何实现啊 ？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#cc
height:200px;
width:300px;
overflow:hidden;
#cc div
font-size:72px;
text-align:center;
line-height:200px;
width:300px;
height:200px;
background-color:#FFC;
</style>
</head>
<body>
<div id="cc">
<div>1</div>
<div style="display:none">2</div>
<div style="display:none">3</div>
<div style="display:none">4</div>
<div style="display:none">5</div>
<div style="display:none">6</div>
<div style="display:none">7</div>
<div style="display:none">8</div>
</div>
<script language="javascript" type="text/javascript" >
var N=0;
function nextDIV()
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="none";
if(N==7) N=0;
else N++;
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="block";
function previousDIV()
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="none";
if(N==0) N=7;
else N--;
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="block";
</script>
<input type="button" onclick="nextDIV()" value="next" />
<input type="button" onclick="previousDIV()" value="previous" />
</body> 参考技术B 还要设置Z-index属性！！！追问
什么意思，怎么做？
以上是关于JavaScript怎么实现层的显示和隐藏？的主要内容，如果未能解决你的问题，请参考以下文章