首页 > 网络编程 > JavaScript > 网页特效 > 导航菜单 > JAVASCRIPT 点击

JAVASCRIPT 点击显示隐藏层

2009-06-11 02:45:48 作者：

用js实现的点击显示与隐藏层的代码。主要是用于一些tab切换类

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>点击显示/隐藏层</title> 
//code from www.jb51.net 
<style type="text/css"> 
a{text-decoration:none;} 
.tab{border:1px solid #e57243;border-top:0;margin:10px 0;text-align:left;width:200px;font-size:14px;} 
.th{border-top:1px solid #e57243;padding:5px;font-weight:700;clear:both;background:#f5e1d9;} 
.td{background:none;padding-left:37px;} 
</style> 
<script type="text/javascript"> 
function chg(id_num){ 
var oa = document.getElementById(id_num); 
var ob = document.getElementById("test_a"); 
if(oa.style.display == "block"){ 
oa.style.display = "none"; 
ob.innerHTML = "[+]"; 
}else{ 
oa.style.display = "block"; 
ob.innerHTML = "[-]"; 
} 
return false; 
} 
</script> 
</head> 
<body> 
<div class="tab"> 
<div class="th td" id="test" style="display: block;"> 
脚本之家，脚本编程基地。欢迎大家学习交流。</div> 
<div class="th" id="9"> 
<a href="#" onclick="return chg('test');" id="test_a">[-]</a> <--点击</div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JAVASCRIPT 点击显示 隐藏层

您可能感兴趣的文章:

JAVASCRIPT 点击显示隐藏层