本文提供了一个使用HTML、CSS和JavaScript实现的简单树形导航栏代码示例。通过点击父级链接，子级菜单将展开或折叠，适用于创建交互式的网站导航结构。
求HTML语言编写的树形导航栏代码
<HTML>
<HEAD>
<TITLE>树形菜单</TITLE>
<STYLE type="text/css">
DIV{
FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;
}
A{
FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none
}
A:hover{
FONT-SIZE: 13px; COLOR: #999999
}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1)
{
if(document.getElementById(d1).style.display=='none')
{
document.getElementById(d1).style.display='block'; //显示
}
else
{
document.getElementById(d1).style.display='none'; //隐藏
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV HEIGHT="30"><FONT color="#CC0000" size="6" ><B>javascript：</B></FONT></DIV><BR>
<A href="javascript:onClick=show('1') ">中国</A>
<DIV id="1" style="display:none">
   四川<BR>
   北京<BR>
   上海<BR>
   天津<BR>
   澳门<BR>
   山西<BR>
   陕西<BR>
</DIV>
<DIV><A href="javascript: onClick=show('2') "> 美国</A></DIV>
<DIV id="2" style="display:none">
   纽约<BR>
   反射<BR>
   加州<BR>
   户口
</DIV>
<DIV><A href="javascript:onClick=show('3') "> 法国</A></div>
<DIV id="3" style="display:none">
   法国<BR>
   法国<BR>
   法国<BR>
   法国<BR>
</DIV>
<DIV><A href="javascript:onClick=show('4') "> 英国</A></div>
<DIV id="4" style="display:none">
   法国<BR>
   法国<BR>
   法国<BR>
   法国<BR>
   法国<BR>
</DIV>
<DIV><A href="javascript:onClick=show('5') ">奥女</A></div>
<DIV id="5" style="display:none">
   法国<BR>
   法国<BR>
   法国<BR>
   法国<BR>
</DIV>
<DIV><A href="javascript:onClick=show('6') "> 够国</A></div>
<DIV id="6" style="display:none">
   法国<BR>
   法国<BR>
   法国<BR>
   法国<BR>
</DIV>
</BODY>
</HTML>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
