javascript实现树状菜单

WEB设计 journey 45416℃ 0评论

<HTML>
  <HEAD>
    <META content=”text/html; charset=gb2312″ http-equiv=Content-Type>
    <META content=”MSHTML 5.00.2314.1000″ name=GENERATOR>
    <TITLE>树状菜单</TITLE>
  </HEAD>
  <BODY>
    <style>
    <!–
      a.parentlink
      { text-decoration: none; color: #0000ff; font-size: 12px }
      a.parentlink:hover,a.childlink:hover { color: #ff0000; }
      a.childlink,td.childlink
      { text-decoration: none; color: #a57aeb; font-size: 12px }
      .px7
      { font-size: 7px; vertical-align: middle; }
    –>
    </style>

    <script language=javascript>
      var item_num=7;  
      var item_word=new Array();
      for(i=0;i<item_num;i++)
        item_word[i]=new Array();
      item_word[0][0]=”雅虎”;      
      item_word[0][1]=”Google”;
      item_word[0][2]=”北大天网”;
      item_word[1][0]=”蔚蓝书店”;
      item_word[1][1]=”当当书店”;
      item_word[1][2]=”China-Pub”;
      item_word[2][0]=”票务网”;
      item_word[2][1]=”QQ交友中心”;
      item_word[3][0]=”XML论坛”;
      item_word[3][1]=”硅谷动力”;
      item_word[3][2]=”《微型计算机》首页”;
      item_word[3][3]=”CSDN文档中心”;
      item_word[3][4]=”中文Unix论坛”;
      item_word[4][0]=”新浪新闻”;
      item_word[5][0]=”下载中心”;
      item_word[6][0]=”易趣网”;
      item_word[6][1]=”8848网上商城”;

      var item_link=new Array();  //菜单的链接
      for(i=0;i<item_num;i++)
        item_link[i]=new Array();
      item_link[0][0]=”http://www.yahoo.com“;
      item_link[0][1]=”http://www.google.com“;
      item_link[0][2]=”http://bingle.pku.edu.cn/“;
      item_link[1][0]=”http://www.welan.com/book/book.asp“;
      item_link[1][1]=”http://www.dangdang.com/“;
      item_link[1][2]=”http://www.china-pub.com/“;
      item_link[2][0]=”http://www.piao.com/index.jsp“;
      item_link[2][1]=”http://love.tencent.com“;
      item_link[3][0]=”http://www.irisbay.com/cgi-bin/ddb/ddblist.cgi?db=xml“;
      item_link[3][1]=”http://home.enet.com.cn/index.shtml“;
      item_link[3][2]=”http://www.newhardware.com.cn/microcomputer/index.pcshow“;
      item_link[3][3]=”http://www.csdn.net“;
      item_link[3][4]=”http://unix.windmoon.nu/“;
      item_link[4][0]=”http://news.sina.com.cn/“;
      item_link[5][0]=”javascript:”;
      item_link[6][0]=”http://www.eachnet.com“;
      item_link[6][1]=”http://www.8848.net.cn/“;

      var item=new Array();  //菜单的HTML
      for(i=0;i<item_num;i++)
        item[i]=””;
      for(i=0;i<item_num;i++)
        for(j=0;j<item_word[i].length;j++)
          item[i]+=” |<span class=px7>-● </span><a class=childlink href=”+item_link[i][j]+”

onclick=javascript:this.blur();>”+item_word[i][j]+”</a><br>”;

      //————定义一个清空各菜单的函数————–
      function startItem()
      {
        for(i=0;i<item_num;i++)
        document.all.titem.cells[2*i+1].innerHTML=””;
      }

     //————定义一个菜单展开的函数—————-
     function openItem(n)
     {
       if(document.all.titem.cells[n*2+1].innerHTML==””)
       {
         startItem();
         document.all.titem.cells[n*2+1].innerHTML=item[n];
       }
       else
         startItem();
     }

     //—————–开始实现菜单——————-
     document.writeln(“<table id=titem>”);
     document.writeln(”  <tr><td height=20 valign=bottom><span class=px7>● </span><a class=parentlink

href=javascript: onclick=javascript:openItem(0);this.blur();>栏目一</a></td></tr>”);
     document.writeln(”  <tr><td class=childlink></td></tr>”);
     document.writeln(”  <tr><td height=20 valign=bottom><span class=px7>● </span><a class=parentlink

href=javascript: onclick=javascript:openItem(1);this.blur();>栏目二</a></td></tr>”);
     document.writeln(”  <tr><td class=childlink></td></tr>”);
     document.writeln(”  <tr><td height=20 valign=bottom><span class=px7>● </span><a class=parentlink

href=javascript: onclick=javascript:openItem(2);this.blur();>栏目三</a></td></tr>”);
     document.writeln(”  <tr><td class=childlink></td></tr>”);
     document.writeln(”  <tr><td height=20 valign=bottom><span class=px7>● </span><a class=parentlink

href=javascript: onclick=javascript:openItem(3);this.blur();>栏目四</a></td></tr>”);
     document.writeln(”  <tr><td class=childlink></td></tr>”);
     document.writeln(”  <tr><td height=20 valign=bottom><span class=px7>● </span><a class=parentlink

href=javascript: onclick=javascript:openItem(4);this.blur();>栏目五</a></td></tr>”);
     document.writeln(”  <tr><td class=childlink></td></tr>”);
     document.writeln(”  <tr><td height=20 valign=bottom><span class=px7>● </span><a class=parentlink

href=javascript: onclick=javascript:openItem(5);this.blur();>栏目六</a></td></tr>”);
     document.writeln(”  <tr><td class=childlink></td></tr>”);
     document.writeln(”  <tr><td height=20 valign=bottom><span class=px7>● </span><a class=parentlink

href=javascript: onclick=javascript:openItem(6);this.blur();>栏目七</a></td></tr>”);
     document.writeln(”  <tr><td class=childlink></td></tr>”);
     document.writeln(“</table>”);
   </script>
  </BODY>
</HTML>

转载请注明:咖啡杯里游泳 » javascript实现树状菜单

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(186)个小伙伴在吐槽
  1. Thanks, this website is really useful.
    Kindra2015-10-21 06:52 回复
  2. Great internet site! It looks very good! Sustain the good job!
    Franziska2015-10-19 22:33 回复
  3. A folder ought to appear in your desktop containing the program and the read it file.
    Sherry2015-10-15 00:36 回复
  4. Exceptionally user pleasant website. Tremendous information available on few gos to.
    Karolyn2015-10-14 23:10 回复
  5. Thanks a ton for sharing this well put together web page.
    Lilly2015-10-14 07:34 回复
  6. I treasure the data on your website. Much thanks.
    Leland2015-10-04 22:08 回复
1 17 18 19