js控制层的隐藏显示,帮忙修改下一下代码,默认让“栏目一”显示,“栏目二”和“栏目三”隐藏?
<style>#foldbar{margin-left:130px;;cursor:pointer;display:inline}</style><script>varf...
<style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_2_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_3_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table> 展开
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_2_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_3_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table> 展开
3个回答
展开全部
<style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
window.onload = function(){
title_2_content.style.display="none";
title_3_content.style.display="none";
}
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_2_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_3_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
window.onload = function(){
title_2_content.style.display="none";
title_3_content.style.display="none";
}
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_2_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_3_content">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table>
展开全部
重点是在><div id="title_2_content">
标签处添加style属性 如:<div id="title_2_content" style="display:none">
栏目2的右边的 - 减号变 + 加号 ,如
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
下面是完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content" style="display:block">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_2_content" style="display:none">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_3_content" style="display:none">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table>
</body>
</html>
标签处添加style属性 如:<div id="title_2_content" style="display:none">
栏目2的右边的 - 减号变 + 加号 ,如
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
下面是完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<style>
#foldbar {margin-left:130px;;cursor:pointer;display:inline}
</style>
<script>
var foldimg="\+"
var puckimg="-"
function fold(o){
var show = o.innerHTML==foldimg?true:false;
o.innerHTML=show?puckimg:foldimg;
obj = document.getElementById(o.parentNode.id+"_content")
obj.style.overflow = "hidden"
obj.style.display = "block"
if(!obj.h){
obj.h=obj.offsetHeight
obj.style.height=obj.h
}
playfold(obj,show)
}
playfold = function(o,show){
var h=10;//px
var time=10;//ms
var timer=window.setTimeout(function(){playfold(o,show)},10);
if(parseInt(o.style.height)<o.h&&show){
o.style.height = parseInt(o.style.height)+h+"px";
}else if(parseInt(o.style.height)>0&&!show){
var fh = parseInt(o.style.height)-h
fh = fh>0?fh:0;
o.style.height = fh+"px";
if(!fh)o.style.display = "none";
}else{
window.clearTimeout(timer);
}
}
</script>
<table width="200" border="1">
<tr>
<td id="title_1">栏目1<span id=foldbar onclick=fold(this)>-</span></td>
</tr>
<tr>
<td><div id="title_1_content" style="display:block">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_2">栏目2<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_2_content" style="display:none">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
<tr>
<td id="title_3">栏目3<span id=foldbar onclick=fold(this)>+</span></td>
</tr>
<tr>
<td><div id="title_3_content" style="display:none">用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果<br>
用JS实现层的折叠效果</div></td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
$("#title_1_content").show();
$("#title_2_content").hide();
$("#title_3_content").hide();
$("#title_2_content").hide();
$("#title_3_content").hide();
追问
不行啊
追答
你要引用JQUERY啊 大哥,你写的全部都是JS 肯定就没有引用 JQUERY嘛
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询