css显示隐藏内容

最新推荐文章于 2022-05-18 22:00:31 发布

JaHunter1

最新推荐文章于 2022-05-18 22:00:31 发布

阅读量159

点赞数

分类专栏： css 文章标签： CSS JavaScript 教育活动 XHTML ViewUI

本文链接：https://blog.csdn.net/JaHunter1/article/details/83430329

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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="#" οnclick="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   οnclick="changemenu('menu_1');">学院信息</a></div>
       <div class="a2"><a   οnclick="changemenu('menu_2');">先进性教育</a></div>
       <div class="a3"><a   οnclick="changemenu('menu_3');">招生信息</a></div>
       <div class="a4"><a   οnclick="changemenu('menu_4');">最新讲座</a></div>
       <div class="a5"><a   οnclick="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>

JaHunter1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css显示隐藏内容

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;点击显示/隐藏层&lt;/title&gt;&l
复制链接

扫一扫