JS與CSS樹形菜單

 HEAD地區代碼：

<style>
<!--
a.parentlink
{ text-decoration: none; color: #333333; font-size: 12px }
a.parentlink:hover,a.childlink:hover { color: #000000; }
a.childlink,td.childlink
{ text-decoration: none; color: #666666; font-size: 12px }
.px7
{ font-size: 7px; vertical-align: middle; }
-->
</style>

BODY地區代碼:

<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[1][0]="核定資訊";
item_word[2][0]="申報資訊";
item_word[3][0]="稅金入庫";
item_word[3][1]="減免";
item_word[3][2]="緩徵";
item_word[3][3]="滯納金加收資訊";
item_word[3][4]="提退稅金資訊";
item_word[3][5]="呆帳稅金情況";
item_word[4][0]="欠稅資訊";
item_word[5][0]="違章、違法處罰資訊";
item_word[6][0]="發票領購資訊";
item_word[6][1]="發票繳銷資訊";
item_word[6][2]="發票流失資訊";
item_word[6][3]="定額發票繳稅情況";

var item_link=new Array();  //菜單的連結
for(I=0;I<item_num;I++)
item_link[I]=new Array();
item_link[0][0]="#";
item_link[1][0]="#";
item_link[2][0]="#";
item_link[3][0]="#";
item_link[3][1]="#";
item_link[3][2]="#";
item_link[3][3]="#";
item_link[3][4]="#";
item_link[3][5]="#";
item_link[4][0]="#";
item_link[5][0]="#";
item_link[6][0]="#";
item_link[6][1]="#";
item_link[6][2]="#";
item_link[6][3]="#";

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>

收集CSDN部落格，轉載請標明出處：http://blog.csdn.net/nickshen3/archive/2007/06/21/1661159.aspx