JavaScript怎么实现层的显示和隐藏？
2个回答
展开全部
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 取决于你的上下文.
oDiv.style.visibility = "visible|hidden"; // 显示或者隐藏,hidden会保留div的位置,会显示一块空白
oDiv.style.display = "block|inline|none";//换行显示\同行显示\不显示.none不会保留div的位置,会由其他div自动填充原来的位置
//none 和 visible 取决于你的上下文.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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">
.section{width:560px;border:black solid 1px;}
#jay{background-color:#ccc;}
#domsters{background-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>
<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">
.section{width:560px;border:black solid 1px;}
#jay{background-color:#ccc;}
#domsters{background-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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
