Tab菜单样式效果

在网页上实现Tab菜单不用掌握太多的编程语言

实现方法是通过 Javascript程序修改网页CSS显示属性，达到Tab菜单的动态效果

例程：

<STYLE type=text/css>
#d1 {display: block} //起始页应该显示的区域，设定其display属性为块显示
#d2 {display: none} //Tab菜单不显示的部分，相当于被隐藏了
</STYLE>

<A class=tab href="#" target=_self onclick="changecss('d1','d2')">标签1</A> //Tab标签文字
<A class=tab href="#" target=_self onclick="changecss('d2','d1')">标签2</A>

<DIV id=d1>标签1标签1标签1标签1标签1标签1</DIV> //Tab菜单的内容区域，显示的部分

<DIV id=d2>标签2标签2标签2标签2标签2标签2</DIV> // Tab菜单的内容区域，不显示部分

<script language="javascript">
function changecss(A,B) //切换的原理是当按下B菜单切换的时候，将A区域的display属性改为不显示，将B区域的display属性改为显示，A、B均为区域的id。{
document.getElementById(A).style.display= "block";
document.getElementById(B).style.display= "none";

}
</script>

如果有三个以上的Tab子菜单，每次只要将当前显示的菜单内容设定隐藏，然后将要显示的区域设定显示。

查找不显示的区域的办法可以通过一个while循环语句实现，每次找一个标签，并判断当前的值。
文章内容有红网工作室编辑发布：北京网站建设