Heim > Artikel > Web-Frontend > 简单树形菜单_html/css_WEB-ITnose
简单树形菜单_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:281449Durchsuche
<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：详解CSS display:inline-block的应用_html/css_WEB-ITnoseNächster Artikel：bootstrap初探_html/css_WEB-ITnose