先看看 截图
实现的就是类似的效果。
下面把代码全部上上:(有几个图片,可以去我的csdn下载我这个项目。)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="标签效果.aspx.cs" Inherits="wsw_测试_标签效果" %>
<!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 runat="server">
<title>无标题页</title>
<style media="screen" type="text/css">
* {
font-size:12px;
}
html, body {
margin:0;
text-align:center;
over-flow:hidden;
height:100%;
width:100%;
}
UL {
list-style-type:none;
margin:0px;
}
/* 标准盒模型 */
.ttl {
height:18px;
}
.ctt {
height:auto;
padding:6px;
clear:both;
border:1px solid #064ca1;
border-top:0;
text-align:left;
}
.w936 {
margin:2px 0;
clear:both;
width:936px;/*滑动门的宽度*/
}
/* TAB 切换效果 */
.tb_ {
background-image: url('tabs2_1.gif');
background-repeat: repeat-x;
background-color: #E6F2FF;
}
.tb_ ul {
height:24px;
}
.tb_ li {
float:left;
height: 24px;
line-height:1.9;
width: 94px;
cursor:pointer;
}
/* 控制显示与隐藏css类 */
.normaltab {
background-image:url('tabs2_2.gif');
background-repeat: no-repeat;
color:#1F3A87;
}
.hovertab {
background-image: url('tabs2_3.gif');
background-repeat: no-repeat;
color:#1F3A87;
font-weight:bold
}
.dis {
display:block;
}
.undis {
display:none;
}
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" οnmοuseοver="x:HoverLi(1);"> ASP.NET</li>
<li id="tb_2" class="normaltab" οnmοuseοver="i:HoverLi(2);"> MYSQL</li>
<li id="tb_3" class="normaltab" οnmοuseοver="a:HoverLi(3);"> DELPHI</li>
<li id="tb_4" class="normaltab" οnmοuseοver="o:HoverLi(4);"> VB.NET</li>
<li id="tb_5" class="normaltab" οnmοuseοver="g:HoverLi(5);"> JAVA</li>
<li id="tb_6" class="normaltab" οnmοuseοver="z:HoverLi(6);"> PHP5</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div>
<div class="undis" id="tbc_02">这里是MYSQL的相关内容</div>
<div class="undis" id="tbc_03">这里是DELPHI的相关内容</div>
<div class="undis" id="tbc_04">这里是VB.NET的相关内容</div>
<div class="undis" id="tbc_05">这里是JAVA的相关内容</div>
<div class="undis" id="tbc_06">这里是PHP5的相关内容</div>
</div>
</div>
</form>
</body>
</html>
上面功能:csdn下载。。。http://download.csdn.net/detail/njxiaogui/4165885