怎么让左边的导航栏内容选中后在右边空白出直接显示出来内容,而不是建立新连接或窗口~~~~我很喜欢这个导航栏特效的下面是全部代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0053)http://www.baron.com.cn/javascript/zh/20030114zh2.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>web reference</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=JavaScript1.2 type=text/javascript>
var maxmnus = 5
function opTab(){
var mnu = document.getElementById("menubar")
var arrdiv = document.getElementById("arrow")
var arrtxt = document.getElementById("arr")
if((mnu.style.display != "block") || (mnu.style.display == "")){
mnu.style.display = "block"
arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2)
arrtxt.innerText = "3";
} else {
mnu.style.display = "none"
arrtxt.innerText = "4";
arrdiv.style.pixelLeft = 0;
}
event.cancelBubble = true;
}
function toggleMenu(el){
for(var i = 0;i < maxmnus;i++) document.getElementById(document.getElementById("c" + i).menu).style.display = "none";
if(el.status == "closed"){
el.status = "open"
document.getElementById(el.menu).style.display = "block";
} else {
el.status = "closed"
}
}
function toggleSub(e){
el = document.getElementById(e)
if(el.status == "closed"){
el.style.display = "block";
el.status = "open"
} else {
el.style.display = "none";
el.status = "closed"
}
event.cancelBubble = true;
}
</SCRIPT>
<STYLE type=text/css>#menubar {
DISPLAY: none; FONT-WEIGHT: 700; FONT-SIZE: 10px; Z-INDEX: 5; FILTER: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1'); LEFT: 0px; BACKGROUND-IMAGE: url(http://www.diades.co.uk/freestuff/mnu.jpg); CURSOR: hand; BACKGROUND-REPEAT: repeat-y; FONT-FAMILY: Verdana,Helvetica,Arial; POSITION: absolute; TOP: 0px
}
.indicator {
FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #b24426; FONT-FAMILY: Webdings
}
.r1 {
BORDER-RIGHT: #e7e8f1 2px outset; BORDER-TOP: #e7e8f1 2px outset; PADDING-LEFT: 5px; FILTER: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1'); LEFT: 5px; BACKGROUND-IMAGE: url(http://www.diades.co.uk/freestuff/mnu.jpg); PADDING-BOTTOM: 1px; BORDER-LEFT: #e7e8f1 2px outset; WIDTH: 213px; COLOR: #e7e8f1; PADDING-TOP: 1px; BORDER-BOTTOM: #e7e8f1 2px outset; BACKGROUND-REPEAT: repeat-y; POSITION: relative; TOP: 10px; adding-right: 5px
}
.submenu1 {
BORDER-RIGHT: #e0f8e3 2px inset; PADDING-RIGHT: 3px; BORDER-TOP: #e0f8e3 2px inset; DISPLAY: none; PADDING-LEFT: 3px; FONT-WEIGHT: 700; FONT-SIZE: 10px; FILTER: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1'); LEFT: 0px; BACKGROUND-IMAGE: url(http://www.diades.co.uk/freestuff/sub.jpg); PADDING-BOTTOM: 3px; BORDER-LEFT: #e0f8e3 2px inset; WIDTH: 100%; COLOR: #2644b2; PADDING-TOP: 3px; BORDER-BOTTOM: #e0f8e3 2px inset; BACKGROUND-REPEAT: repeat-y; FONT-FAMILY: Verdana,Helvetica,Arial; POSITION: relative; TOP: 0px; HEIGHT: 95%; BACKGROUND-COLOR: #cff1d4
}
.submenu2 {
BORDER-RIGHT: #e0f8e3 3px groove; PADDING-RIGHT: 3px; BORDER-TOP: #e0f8e3 3px groove; MARGIN-TOP: 4px; DISPLAY: none; PADDING-LEFT: 3px; FONT-WEIGHT: 700; FONT-SIZE: 10px; FILTER: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1'); LEFT: 0px; BACKGROUND-IMAGE: url(http://www.diades.co.uk/freestuff/sub.jpg); PADDING-BOTTOM: 3px; BORDER-LEFT: #e0f8e3 3px groove; WIDTH: 90%; COLOR: #2644b2; PADDING-TOP: 3px; BORDER-BOTTOM: #e0f8e3 3px groove; BACKGROUND-REPEAT: repeat-y; FONT-FAMILY: Verdana,Helvetica,Arial; POSITION: relative; TOP: 0px; BACKGROUND-COLOR: #cff1d4
}
.pulltab {
PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 10px; Z-INDEX: 5; FILTER: progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1', endColorstr='#2644b2'); LEFT: 0px; BACKGROUND-IMAGE: url(http://www.diades.co.uk/freestuff/tab.jpg); WIDTH: 20px; CURSOR: hand; COLOR: #2644b2; BACKGROUND-REPEAT: repeat-y; FONT-FAMILY: Webdings; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
.inner {
WIDTH: 100%; HEIGHT: 100%
}
.mtab {
WIDTH: 100%; POSITION: relative; TOP: 0px; btninner: 100%
}
.fr {
LEFT: 30px; POSITION: absolute; TOP: 0px
}
</STYLE>
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
<base target="_self">
</HEAD>
<BODY scroll=no>
<DIV id=menubar
style="WIDTH: 223px; ; HEIGHT: expression(document.body.offsetHeight)">
<DIV class=r1 id=c0
onclick=toggleMenu(this) menu="m0" status="closed">
<DIV class=btninner id=cbtn><font size="4">总目录1</font></DIV>
<DIV class=mtab>
<TABLE class=submenu1 id=m0 cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</a></font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick="toggleSub('m0s0');"><font size="3">待添加分目录↓</font>
<TABLE class=submenu2 id=m0s0 cellSpacing=0 cellPadding=0 align=center
border=0 status="closed">
<TBODY>
<TR>
<TD
onclick=opTab();><font size="3">待添加分分目录</font></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=r1 id=c1
onclick=toggleMenu(this) menu="m1" status="closed">
<DIV class=btninner id=cbtn><font size="4">总目录2</font></DIV>
<DIV>
<TABLE class=submenu1 id=m1 cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD
onclick=opTab();><font size="3">待添加分目录</font></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=r1 id=c2
onclick=toggleMenu(this) menu="m2" status="closed">
<DIV class=btninner id=cbtn><font size="4">总目录3</font></DIV>
<DIV>
<TABLE class=submenu1 id=m2 cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=r1 id=c3
onclick=toggleMenu(this) menu="m3" status="closed">
<DIV class=btninner id=cbtn><font size="4">总目录</font></DIV>
<DIV>
<TABLE class=submenu1 id=m3 cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV class=r1 id=c4
onclick=toggleMenu(this) menu="m4" status="closed">
<DIV class=btninner id=cbtn><font size="4">总目录</font></DIV>
<DIV>
<TABLE class=submenu1 id=m4 cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR>
<TR>
<TD><font size="3">待添加分目录</font></TD></TR></TBODY></TABLE></DIV></DIV></DIV>
<DIV class=pulltab id=arrow
onclick=opTab()>
<TABLE class=inner>
<TBODY>
<TR>
<TD id=arr vAlign=center>4</TD></TR></TBODY></TABLE></DIV>
<DIV class=fr id=fr name="fr">
<H2> </H2>
<p>待添加文件内容。。。。。</p>
</DIV></BODY></HTML>