css显示隐藏内容

JaHunter

浏览: 92049 次
性别:
来自: 北京

最近访客更多访客>>

梁静茹的小三

hgq114

zhenghuiqiang316

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS JavaScript 教育活动 XHTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击显示/隐藏层</title>
<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>

<script>
var old=null;
function changemenu(mydiv){
   var obj = document.getElementById(mydiv);
   if (old!=null&&old!=obj)
     old.style.display='none';
   old=obj;
   if (obj.style.display=='none'){
     obj.style.display='block';
   }else{
     obj.style.display='none';
   }
}
</script>
<div id="myc">
   <div class="changemeun">
       <div class="a1"> <a   onclick="changemenu('menu_1');">学院信息</a></div>
       <div class="a2"><a   onclick="changemenu('menu_2');">先进性教育</a></div>
       <div class="a3"><a   onclick="changemenu('menu_3');">招生信息</a></div>
       <div class="a4"><a   onclick="changemenu('menu_4');">最新讲座</a></div>
       <div class="a5"><a   onclick="changemenu('menu_5');" >学校活动</a></div>
   </div>

   <div   id="menu_1" style="DISPLAY: none" class="list_a1">yhrersghers</div>
   <div   id="menu_2" style="DISPLAY: none" class="list_a2">sdfhdsfhdfshdfs
</div>

<div   id="menu_3" style="DISPLAY: none" class="list_a3">dsfhsds</div>

<div   id="menu_4" style="DISPLAY: none" class="list_a4">dhsfdsdshsd</div>

<div   id="menu_5" style="DISPLAY: none"   class="list_a5">gagsdgsg</div>
</div>

</body>
</html>