html代码 点击显示隐藏菜单代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>点击显示隐藏菜单代码</title>
<style type=”text/css”>
*{ margin:0px; padding:0px; border:0px; }
body{ font-size:12px; color:#333;text-align:center;}
.Test5study{ background:#fff;}
.Test5study{text-align:left;width:220px;height:auto;border:solid 1px #F7BE21;margin:10px auto 0px;overflow: hidden;position: absolute;left: 10px;top: 0px; }
.Test5study h2{font-size:14px;height:22px;line-height:22px;background:#FFF7C6;text-indent:10px;position:relative;border-top: 1px solid #fff;border-bottom: 1px solid #F7BE21; font-weight:normal;cursor:pointer;}
.Test5study h2 span{font-weight: normal;position:absolute;top:0;right:6px;}
.Test5study li{border-bottom:dashed 1px #eee;}
.Test5study {border-bottom:solid 1px #F7BE21;}
.TxtList{ list-style:disc url(../130/none); margin:6px 10px 6px 20px;}
</style>
</head>
<body>
<div id=”Test5study” class=”Test5study”>
<h2 id=”t1″ οnclick=”ShHi(‘t1′,’h1’);”>标题></h2>
<ul class=”TxtList” id=”h1″>
            <li><img src=”img1.jpg” width=”100″ height=”90″ /></li>
<li>身体健康…</li>

</ul>
<h2 id=”t2″ οnclick=”ShHi(‘t2′,’h2’);”>标题></h2>
<ul class=”TxtList” id=”h2″ style=”display:none;”>
<li><img src=”img2.jpg” width=”100″ height=”90″ /></li>
<li>没毒…</li>
</ul>
<h2 id=”t3″ οnclick=”ShHi(‘t3′,’h3’);”>标题></h2>
<ul class=”TxtList” id=”h3″ style=”display:none;”>
<li><img src=”img3.jpg” width=”100″ height=”90″ /></li>
<li>艾滋病…</li>
</ul>
<h2 id=”t4″ οnclick=”ShHi(‘t4′,’h4’);”>标题></h2>
<ul class=”TxtList” id=”h4″ style=”display:none;”>
<li><img src=”img1.jpg” width=”100″ height=”90″ /></li>
<li>aizib </li>
</ul>
</div>
<script type=”text/javascript”>

function $(d){return document.getElementById(d);}
function f(d){var t=$(d);if (t){return t.style;}else{return null;}}
function Hi(){var items = document.getElementsByTagName(“ul”);for (var i=0;i<items.length;i++){items[i].style.display=’none’;}}
function Hl(){var iteml = document.getElementsByTagName(“h2”);for (var j=0;j<iteml.length;j++){iteml[j].style.fontWeight=’normal’;}}
function h(d){var s=f(d);var b=s.display;if (b==’none’){return true;}else{return false;}}
function ShHi(ii,jj){if(h(jj)){Hl();Hi();f(jj).display=’block’;f(ii).fontWeight=’bold’;}else{Hl();Hi();f(jj).display=’none’;f(ii).fontWeight=’normal’;}}
</script>
</body>
</html>

    原文作者:qq_41650558
    原文地址: https://blog.csdn.net/qq_41650558/article/details/79103337
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞