求JS的树型菜单

JavaScript034

求JS的树型菜单,第1张

<tr>

<td align="center" class="images/LeftMenu_Title" onmouseover="LeftExtMenuOver(Img12)" style="CURSOR: hand" onclick="LeftExtMenuClick(Img12)" onmouseout="LeftExtMenuOut(Img12)" background="images/LeftMenu_TitleBG_Sub.gif" height="27" valign="bottom">主项1</td>

<td background="images/LeftMenu_Right.gif">

<img id="Img12" style="DISPLAY: none" height="27" src="images/LeftMenu_Right_Over.gif" width="7"></td>

</tr>

<tr style="DISPLAY: none" valign="top">

<td bgcolor="#e5e5e5" colspan="2">

<table cellspacing="0" cellpadding="0" width="168" border="0">

<tr>

<td width="161" height="5"></td>

<td width="7" height="2"><img height="1" src width="7"></td>

</tr>

<tr>

<td width="161" height="20">

<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项1</td>

<td width="7" background="images/LeftMenu_RightBG.gif" rowspan="5">

<img height="7" src="images/LeftMenu_RightBG.gif" width="7"></td>

</tr>

<tr>

<td height="20">

<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项2</td>

</tr>

<tr>

<td height="20">

<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项3</td>

</tr>

<tr>

<td height="20">

<img height="23" src="images/Icon_ChildTree.gif" width="26" align="absMiddle" border="0">子项4</td>

</tr>

<tr>

<td height="20">

<img height="23" src="images/Icon_ChildTree_End.gif" width="26" align="absMiddle" border="0">子项5</td>

</tr>

<tr>

<td background="images/LeftMenu_BottomBG.gif" height="5">

<img height="5" src="images/LeftMenu_BottomBG.gif" width="3"></td>

<td valign="top">

<img height="5" src="images/LeftMenu_RightCorner.gif" width="7"></td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="center" class="images/LeftMenu_Title" onmouseover="LeftExtMenuOver(Img15)" style="CURSOR: hand" onclick="LeftExtMenuClick(Img15)" onmouseout="LeftExtMenuOut(Img15)" background="images/LeftMenu_TitleBG_Sub.gif" height="27" valign="bottom">主项2</td>

<td background="images/LeftMenu_Right.gif">

<img id="Img15" style="DISPLAY: none" height="27" src="images/LeftMenu_Right_Over.gif" width="7"></td>

</tr>

<tr style="DISPLAY: none" valign="top">

<td bgcolor="#e5e5e5" colspan="2">

<table cellspacing="0" cellpadding="0" width="168" border="0">

<tr>

<td width="161" height="5"></td>

<td width="7" height="2"><img height="1" src width="7"></td>

</tr>

<tr>

<td width="161" height="20" align="center">子项</td>

<td width="7" background="images/LeftMenu_RightBG.gif" rowspan="1">

<img height="7" src="images/LeftMenu_RightBG.gif" width="7"></td>

</tr>

<tr>

<td background="images/LeftMenu_BottomBG.gif" height="5">

<img height="5" src="images/LeftMenu_BottomBG.gif" width="3"></td>

<td valign="top">

<img height="5" src="images/LeftMenu_RightCorner.gif" width="7"></td>

</tr>

</table>

</td>

</tr>

<script language="JavaScript">

var LastClick=-1

var LastImg=""

var LastTD=""

var L_RightImgOpen=new Image()

var L_RightImgOver=new Image()

var L_TitleBG_Open=new Image()

var L_TitleBG_OpenURL=new Image()

L_RightImgOpen="images/LeftMenu_Right_Open.gif"

L_RightImgOver="images/LeftMenu_Right_Over.gif"

L_TitleBG_OpenURL="images/LeftMenu_TitleBG_Open.gif"

function LeftExtMenuClick(ImgName)

{

var objTR=event.srcElement.parentElement

var objTD=event.srcElement

var SelectIndex = objTR.rowIndex

var objStyle=objTR.parentElement.rows[SelectIndex+1].style

if (objStyle.display=="none")

{

if(LastClick!=-1){

LeftExtMenuClose(LastTD,LastClick,LastImg)

} //关闭之前的菜单

LeftExtMenuOpen(objTD,SelectIndex,ImgName)

}else{

LeftExtMenuClose(objTD,SelectIndex,ImgName)

}

LastClick=SelectIndex

LastImg=ImgName

LastTD=objTD//记录现在打开的菜单参数,为下次关闭该菜单传递参数

}

function LeftExtMenuOpen(objName,CurrIndex,RightImg)

{

RightImg.src=L_RightImgOpen

RightImg.style.display=""

objName.style.backgroundImage="url(images/LeftMenu_TitleBG_Open.gif)"

objName.parentElement.parentElement.rows[CurrIndex+1].style.display = ""

}

function LeftExtMenuClose(objName,CurrIndex,RightImg)

{

RightImg.src=L_RightImgOver

RightImg.style.display="none"

objName.style.backgroundImage="url(images/LeftMenu_TitleBG_Sub.gif)"

objName.parentElement.parentElement.rows[CurrIndex+1].style.display = "none"

}

//初始化菜单

function LeftMenuInit(CurrIndex)

{

var ImgName=document.all("Img"+CurrIndex)

var objTD=LeftTB.rows[CurrIndex].cells[0]

ImgName.src=L_RightImgOpen

ImgName.style.display=""

objTD.style.backgroundImage="url(images/LeftMenu_TitleBG_Open.gif)"

LeftTB.rows[CurrIndex+1].style.display=""

LastClick=CurrIndex

LastTD=objTD

LastImg=ImgName

}

function LeftExtMenuOver(RightImg)

{

var objTR=event.srcElement.parentElement

for(var i=1i<3i++)

{

if(objTR.tagName!="TR"){objTR=objTR.parentElement}

}

var SelectIndex = objTR.rowIndex

var objStyle=objTR.parentElement.parentElement.rows[SelectIndex+1].style

if ((objStyle.display=="block")||(objStyle.display=="")){}

else

{RightImg.style.display=""}

}

function LeftExtMenuOut(RightImg)

{

var objTR=event.srcElement.parentElement

for(var i=1i<3i++)

{

if(objTR.tagName!="TR"){objTR=objTR.parentElement}

}

var SelectIndex = objTR.rowIndex

var objStyle=objTR.parentElement.rows[SelectIndex+1].style

if ((objStyle.display=="block")||(objStyle.display=="")){}

else

{RightImg.style.display="none"}

}

</script>

上次我帮位朋友写的,使用cookie的方案:

不过近来又写出了另一种方案,不用cookie的,而是根据预设的变量和url的对比: (参考以下代码,修进下即可)

在页面插入js代码

<script language="javascript" type="text/javascript">

function loadFN(){

hrefValue = window.location.href//获取当前页面的地址

alertUrls = [''] //指定你想要alert的域名,多个可以在数组中直接追加即可

//追加如:['', 'bbb.com', 'abc.bbb.com']

for(key in alertUrls){

if(String(hrefValue).indexOf(alertUrls[key]) >= 0){

//指定的字符串值alertUrls[key]在字符串href中出现则>=0,否则为-1

alert( alertUrls[key] )

break//直接跳出循环

}

}

}

///页面载入完成后即执行loadFN函数

window.onload = loadFN//前提是原来页面没有使用onload,否则还要做些针对的处理

</script>