利用JS在asp.net中實作左導航頁的隐藏

我們在csdn論壇上的左上角能夠看到導航欄的功能,下面就模拟該功能,利用js在asp.net中作一個簡單的無重新整理的左導航欄隐藏功能.

首先,作一個架構頁,我們取名main.aspx

<!--main.aspx主要代碼-->

<script>

document.write("<framesetrows='54,28,*,19'frameborder='no'border='0'framespacing='0'>");

document.write("<framesrc='title.aspx'name='topframe'scrolling='no'noresize>");

document.write("<framesrc='bar.aspx'name='mainnaviframe'scrolling='no'>");

<!--left.aspx是導航頁,menuswitch.aspx是互動的按鈕頁-->

document.write("<framesetname='forum'cols='150,8,*'frameborder='no'border='0'framespacing='0'>");

document.write("<framesrc='left.aspx'name='leftframe'scrolling='auto'>");

document.write("<framesrc='menuswitch.aspx'name='swichframe'scrolling='no'>");

document.write("<framesetrows='100%,*'frameborder='no'border='0'framespacing='0'>");

document.write("<framesrc=''name='mainframe'scrolling='no'>");

document.write("</frameset></frameset>");

document.write("<framesrc='bottom.aspx'name='bottomframe'scrolling='no'></frameset>");

</script>

<!--menuswitch.js主要代碼-->

varleftwin=true;

functionchangewin()

{

if(leftwin==true)

parent.forum.cols="0,8,*";

parent.swichframe.menuswitch.innerhtml="<aonclick='changewin();'style='cursor:hand;'><imgsrc='images/arrowopen.gif'border='0'></a>";

leftwin=false;

}

else

parent.forum.cols="150,8,*";

parent.swichframe.menuswitch.innerhtml="<aonclick='changewin();'style='cursor:hand;'><imgsrc='images/arrowclose.gif'border='0'></a>";

leftwin=true;

<!--menuswitch.aspx主要代碼-->

<tableheight="100%"cellspacing="0"cellpadding="0"width="8"background="images/middlebg1.gif"

border="0">

<tr>

<tdonclick="changewin();"style="cursor:hand;"id="menuswitch"align="center">

<imgid="image1"src="images/arrowclose.gif"border="0"/>

</td>

</tr>

</table>

以上功能并不完善,隻能起到抛磚引玉的作用,歡迎網友與我交流.