Rumah > hujung hadapan web > html tutorial > 简单树形菜单_html/css_WEB-ITnose

简单树形菜单_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:34:28
asal
1508 orang telah melayarinya

<!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=gb2312" /><title>制作简单的树形菜单</title><style type="text/css">body{font-size:13px;     line-height:20px;     }a{font-size: 13px;  color: #000000;  text-decoration: none;  }a:hover{font-size:13px;       color: #ff0000;       }img {    vertical-align: middle;    border:0;    list-style-type: none;}.no_circle{list-style-type:none;  /*设置列表项标志的类型为无*/   display:none;    }</style><script  type="text/javascript">function show(){if(document.getElementById("art").style.display=='block'){    document.getElementById("art").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("art").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}function show2(){if(document.getElementById("tietu").style.display=='block'){    document.getElementById("tietu").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("tietu").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}function show3(){if(document.getElementById("fangchan").style.display=='block'){    document.getElementById("fangchan").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("fangchan").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}function show4(){if(document.getElementById("yule").style.display=='block'){    document.getElementById("yule").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("yule").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}</script></head><body><b><img  src="images/fold.gif" alt="简单树形菜单_html/css_WEB-ITnose" ><font color="#009900">树形菜单:</font></b>  <a href="javascript:onclick=show() "><img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >文学艺术</a>        <ul id="art" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >先锋写作</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >小说散文</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >诗风词韵</li>         </ul>        <a href="javascript:onclick=show2() ">          <img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >贴图专区</a>        <ul id="tietu" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >真我风采</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >视屏贴图</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >行行摄摄</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >Flash贴图</li>         </ul>             <a href="javascript:onclick=show3() ">          <img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >房产论坛</a>        <ul id="fangchan" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >我要买房</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >楼市话题</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >我要卖房</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >租房心语</li>            <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >二手市场</li>         </ul>                    <a href="javascript:onclick=show4() ">          <img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >娱乐八卦</a>        <ul id="yule" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >红楼一梦</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >楼市话题</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >笑话论坛</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >休闲生活</li>            <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >大话春秋</li>         </ul>              </body></html>
Salin selepas log masuk

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan