一个简单的网页选项卡效果菜单,CSS、DIV

<html >

<title>选项卡效果菜单</title>

#TabMenu{

float:left;

margin: 0px;

padding: 0px;

height:28px;

width:600px;

font-size:12px;

line-height:28px;

background-image: url(image/show_title.gif);

background-repeat: repeat-x;

background-position: left 0;

border-top: #cccccc 1px solid;

}

#TabMenu ul{

list-style-type:none;

margin:0;

padding:0;

}

#TabMenu li{

float:left;

width:100px;

height:28px;

text-align:center;

border-right:1px #BEC0D5 solid;

}

.show_tab{

color:#000000;

font-weight:normal;

background:#fff;

width:90px;

height:28px;

}

{

color:black;

text-decoration:none;

}

</style>

function showTab(mid)

{

var i=1;

for(i=1;i<=document.getElementsByTagName("li").length;i++)

{

eval("document.getElementById('m"+i+"').className='';");

eval("document.getElementById('DIV"+i+"').style.display='none';");

}

eval("document.getElementById('m"+mid+"').className='show_tab';");

eval("document.getElementById('DIV"+mid+"').style.display='block';");

}

</script>

</head>

<body>

<ul>

<li id="m1" class="show_tab"><a href="" onmouseover="javascript:showTab(1);" >选项卡菜单1</a></li>

<li id="m2"><a href="" onmouseover="javascript:showTab(2);"> 选项卡菜单2</a></li>

<li id="m3"><a href="" onmouseover="javascript:showTab(3);">选项卡菜单3</a></li>

<li id="m4"><a href="" onmouseover="javascript:showTab(4);">选项卡菜单4</a></li>

<li id="m5"><a href="" onmouseover="javascript:showTab(5);">选项卡菜单5</a></li>

</ul>

</div>

<div id="Div1" style="display:block;">选项卡菜单1的内容</div>

<div id="Div2" style="display:none;">选项卡菜单2的内容</div>

<div id="Div3" style="display:none;">选项卡菜单3的内容</div>

<div id="Div4" style="display:none;">选项卡菜单4的内容</div>

<div id="Div5" style="display:none;">选项卡菜单5的内容</div>

</form>

</body>

</html>

背景图片（show_title.gif）

效果图

缺点：只支持IE，在FF下测试不通过。