<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function select_bg(str){
for (i=1;i<=5;i++){
var id="t_"+i;
if ( document.getElementById(id) && document.getElementById(id).className !="select_off" && str != id ) {
document.getElementById(id).className="select_off";
document.getElementById(id+"_content").style.display="none";
}
}
if (document.getElementById(str).className !="select_on") {
document.getElementById(str).className="select_on";
document.getElementById(str+"_content").style.display="";
}
}
</script>
<style>
<!--
body,div,a,p{ font-size:12px; font-family:Arial, Helvetica, sans-serif;}
#div_main{ clear:both; width:550px; margin-top:5px; padding:0px;}
#div_title{ clear:both; width:550px; height:33px; margin:0; padding:0px;}
#div_title ul{ clear:both; list-style:none; margin:0; padding:0px;}
#div_title ul li{ list-style:none; float:left; margin-right:5px; padding:0px; text-align:center; cursor:hand; width:90px; height:33px; line-height:33px; }
/*
如果使用背景图片,则用这三行,然后注释下面三行
.select_on{ background:url(select_bg_on.gif) left bottom no-repeat; font-weight:bold;}
.select_off{ background:url(select_bg_off.gif) left bottom no-repeat; }
#div_line{ list-style:none; clear:both; margin:0; padding:0px; background:url(line.gif) top left repeat-x; width:100%; height:5px; line-height:0px;}
*/
.select_on{ background-color:#ccc; font-weight:bold;}
.select_off{ background-color:#efefef; }
#div_line{ list-style:none; clear:both; margin:0; padding:0px; background-color:#ccc; width:100%; height:5px; line-height:0px;}
#div_content{ clear:both; border-top:0px #CCC solid; border-right:1px #CCC solid; border-bottom:1px #CCC solid; border-left:1px #CCC solid; width:548px; height:100px; line-height:100px; margin:0; padding:2px 0px; text-align:center;}
#div_content ul{ clear:both; list-style:none; margin:0 auto; padding:0px; width:544px; height:24px; display:block;}
#div_content ul li{ list-style:none; float:left; margin:0; padding:0px 5px; width:126px; height:24px; line-height:24px; text-align:left;}
.li_bg_1{ background-color:#FFDFDB;}
.li_bg_2{ background-color:#FFF;}
.li_bg_3{ background-color:#FFBECE;}
.li_bg_4{ background-color:#ECECEC;}
#t_1_content{ margin:0; padding:0px; clear:both;}
#t_2_content{ margin:0; padding:0px; clear:both;}
#t_3_content{ margin:0; padding:0px; clear:both;}
#t_4_content{ margin:0; padding:0px; clear:both;}
#t_5_content{ margin:0; padding:0px; clear:both;}
-->
</style>
</head>
<body>
<div id="div_main">
<div id="div_title">
<ul>
<li id="t_1" class="select_on" onmouseover="select_bg('t_1');">Menu1</li>
<li id="t_2" class="select_off" onmouseover="select_bg('t_2');">Menu2</li>
<li id="t_3" class="select_off" onmouseover="select_bg('t_3');">Menu3</li>
<li id="t_4" class="select_off" onmouseover="select_bg('t_4');">Menu4</li>
<li id="t_5" class="select_off" onmouseover="select_bg('t_5');">Menu5</li>
</ul>
</div>
<div id="div_line"><span></span></div>
<div id="div_content">
<div id="t_1_content" style="display:;"> 1 </div>
<div id="t_2_content" style="display:none;"> 2 </div>
<div id="t_3_content" style="display:none;"> 3 </div>
<div id="t_4_content" style="display:none;"> 4 </div>
<div id="t_5_content" style="display:none;"> 5 </div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function select_bg(str){
for (i=1;i<=5;i++){
var id="t_"+i;
if ( document.getElementById(id) && document.getElementById(id).className !="select_off" && str != id ) {
document.getElementById(id).className="select_off";
document.getElementById(id+"_content").style.display="none";
}
}
if (document.getElementById(str).className !="select_on") {
document.getElementById(str).className="select_on";
document.getElementById(str+"_content").style.display="";
}
}
</script>
<style>
<!--
body,div,a,p{ font-size:12px; font-family:Arial, Helvetica, sans-serif;}
#div_main{ clear:both; width:550px; margin-top:5px; padding:0px;}
#div_title{ clear:both; width:550px; height:33px; margin:0; padding:0px;}
#div_title ul{ clear:both; list-style:none; margin:0; padding:0px;}
#div_title ul li{ list-style:none; float:left; margin-right:5px; padding:0px; text-align:center; cursor:hand; width:90px; height:33px; line-height:33px; }
/*
如果使用背景图片,则用这三行,然后注释下面三行
.select_on{ background:url(select_bg_on.gif) left bottom no-repeat; font-weight:bold;}
.select_off{ background:url(select_bg_off.gif) left bottom no-repeat; }
#div_line{ list-style:none; clear:both; margin:0; padding:0px; background:url(line.gif) top left repeat-x; width:100%; height:5px; line-height:0px;}
*/
.select_on{ background-color:#ccc; font-weight:bold;}
.select_off{ background-color:#efefef; }
#div_line{ list-style:none; clear:both; margin:0; padding:0px; background-color:#ccc; width:100%; height:5px; line-height:0px;}
#div_content{ clear:both; border-top:0px #CCC solid; border-right:1px #CCC solid; border-bottom:1px #CCC solid; border-left:1px #CCC solid; width:548px; height:100px; line-height:100px; margin:0; padding:2px 0px; text-align:center;}
#div_content ul{ clear:both; list-style:none; margin:0 auto; padding:0px; width:544px; height:24px; display:block;}
#div_content ul li{ list-style:none; float:left; margin:0; padding:0px 5px; width:126px; height:24px; line-height:24px; text-align:left;}
.li_bg_1{ background-color:#FFDFDB;}
.li_bg_2{ background-color:#FFF;}
.li_bg_3{ background-color:#FFBECE;}
.li_bg_4{ background-color:#ECECEC;}
#t_1_content{ margin:0; padding:0px; clear:both;}
#t_2_content{ margin:0; padding:0px; clear:both;}
#t_3_content{ margin:0; padding:0px; clear:both;}
#t_4_content{ margin:0; padding:0px; clear:both;}
#t_5_content{ margin:0; padding:0px; clear:both;}
-->
</style>
</head>
<body>
<div id="div_main">
<div id="div_title">
<ul>
<li id="t_1" class="select_on" onmouseover="select_bg('t_1');">Menu1</li>
<li id="t_2" class="select_off" onmouseover="select_bg('t_2');">Menu2</li>
<li id="t_3" class="select_off" onmouseover="select_bg('t_3');">Menu3</li>
<li id="t_4" class="select_off" onmouseover="select_bg('t_4');">Menu4</li>
<li id="t_5" class="select_off" onmouseover="select_bg('t_5');">Menu5</li>
</ul>
</div>
<div id="div_line"><span></span></div>
<div id="div_content">
<div id="t_1_content" style="display:;"> 1 </div>
<div id="t_2_content" style="display:none;"> 2 </div>
<div id="t_3_content" style="display:none;"> 3 </div>
<div id="t_4_content" style="display:none;"> 4 </div>
<div id="t_5_content" style="display:none;"> 5 </div>
</div>
</div>
</body>
</html>
文章来源：桂林唯创网络
475003427