我們在CSDN論壇上的左上角能夠看到導航欄的功能
下面就模擬該功能
利用JS在中作一個簡單的無刷新的左導航欄隱藏功能
首先
作一個框架頁
我們取名 main
aspx
<!
main
aspx 主要代碼
>
<script>
document
write(
<frameset rows=
*
frameborder=
NO
border=
framespacing=
>
);
document
write(
<frame src=
title
aspx
name=
topFrame
scrolling=
NO
noresize>
);
document
write(
<frame src=
bar
aspx
name=
MainNaviFrame
scrolling=
NO
>
);
<!
left
aspx是導航頁
menuswitch
aspx是交互的按鈕頁
>
document
write(
<frameset name=
forum
cols=
*
frameborder=
NO
border=
framespacing=
>
);
document
write(
<frame src=
left
aspx
name=
LeftFrame
scrolling=
auto
>
);
document
write(
<frame src=
menuswitch
aspx
name=
SwichFrame
scrolling=
No
>
);
document
write(
<frameset rows=
%
*
frameborder=
NO
border=
framespacing=
>
);
document
write(
<frame src=
name=
MainFrame
scrolling=
no
>
);
document
write(
</frameset></frameset>
);
document
write(
<frame src=
bottom
aspx
name=
BottomFrame
scrolling=
No
></frameset>
);
</script>
<!
menuswitch
js 主要代碼
>
var leftwin = true;
function changeWin()
{
if(leftwin == true)
{
ls =
*
;
pnuSwitch
innerHTML =
<a onclick=
changeWin();
style=
cursor:hand;
><img src=
images/ArrowOpen
gif
border=
></a>
;
leftwin = false;
}
else
{
ls =
*
;
pnuSwitch
innerHTML =
<a onclick=
changeWin();
style=
cursor:hand;
><img src=
images/ArrowClose
gif
border=
></a>
;
leftwin = true;
}
}
<!
menuswitch
aspx 主要代碼
>
<table height=
%
cellSpacing=
cellPadding=
width=
background=
images/MiddleBg
gif
border=
>
<tr>
<td onclick=
changeWin();
id=
menuSwitch
align=
center
>
<img id=
Image
src=
images/ArrowClose
gif
border=
/>
</td>
</tr>
</table>
以上功能並不完善
只能起到拋磚引玉的作用
歡迎網友與我交流
From:http://tw.wingwit.com/Article/program/net/201311/11728.html