首页 > 编程 > JavaScript > 正文

JavaScript实现简单的树形菜单效果

2019-11-19 16:16:16
字体:
来源:转载
供稿:网友

简单的一个树形菜单,具体内容如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>树形菜单</title>  <style>    body {      font: 12px/20px 宋体;    }    img {      vertical-align: center;      border: none;    }    a {      text-decoration: none;      color: #000;    }    li {      list-style: none;    }  </style>  <script>    function onclickfclose(id) {      var ul = document.getElementById(id);      var objv = ul.style.display;      if (objv == 'none') {        ul.style.display = 'block'      } else {        ul.style.display = 'none';      }    }  </script></head><body><b><img src="images/fold.gif" alt="">树形菜单</b><ul>  <a href="javascript:onclickfclose('art')"><img src="images/fclose.gif" alt="">文学艺术</a></ul><ul id="art" style="display: none;">  <li><img src="images/doc.gif" alt="">著名小说</li>  <li><img src="images/doc.gif" alt="">著名小说</li>  <li><img src="images/doc.gif" alt="">著名小说</li>  <li><img src="images/doc.gif" alt="">著名小说</li></ul><ul>  <a href="javascript:onclickfclose('fangc')"><img src="images/fclose.gif" alt="">房产论坛</a></ul><ul id="fangc" style="display: none;>  <li><img src=" images/doc.gif" alt="">房产推销</li><li><img src="images/doc.gif" alt="">房产推销</li><li><img src="images/doc.gif" alt="">房产推销</li><li><img src="images/doc.gif" alt="">房产推销</li></ul><ul>  <a href="javascript:onclickfclose('tuhua')"><img src="images/fclose.gif" alt="">提图专区</a></ul><ul id="tuhua" style="display: none;>  <li><img src=" images/doc.gif" alt="">风景图画</li><li><img src="images/doc.gif" alt="">风景图画</li><li><img src="images/doc.gif" alt="">风景图画</li><li><img src="images/doc.gif" alt="">风景图画</li></ul><ul>  <a href="javascript:onclickfclose('bagua')"><img src="images/fclose.gif" alt="">娱乐八卦</a></ul><ul id="bagua" style="display: none;>  <li><img src=" images/doc.gif" alt="">明星采访</li><li><img src="images/doc.gif" alt="">明星采访</li><li><img src="images/doc.gif" alt="">明星采访</li><li><img src="images/doc.gif" alt="">明星采访</li></ul></body></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表