下面我将实现一个控件效果:
如下图:
主要代码:
selector.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="selector.aspx.cs" Inherits="selector" %>
<!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>
<link rel="Stylesheet" type="text/css" href="Css/Tab.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function g(o) { return document.getElementById(o); }
function HoverLi(n) {
//如果有N个标签,就将i<=N;
//本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列
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';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Tab标签</h2>
<div class="tab">
<!--tab开始-->
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" οnclick="x:HoverLi(1);">TagName</li>
<li id="tb_2" class="normaltab" οnclick="i:HoverLi(2);">className</li>
<li id="tb_3" class="normaltab" οnclick="a:HoverLi(3);">多条件</li>
<li id="tb_4" class="normaltab" οnclick="HoverLi(4);">子查询</li>
<li id="tb_5" class="normaltab" οnclick="i:HoverLi(5);">直接查询</li>
<li id="tb_6" class="normaltab" οnclick="i:HoverLi(6);">层次</li>
</ul>
</div>
<div class="ctt" style="overflow: hidden;">
<div class="dis" id="tbc_01">
<h2>Tab1</h2>
</div>
<div class="undis" id="tbc_02">
<h2>Tab2</h2>
</div>
<div class="undis" id="tbc_03">
<h2>Tab3</h2>
</div>
<div class="undis" id="tbc_04">
<h2>Tab4</h2>
</div>
<div class="undis" id="tbc_05">
<h2>Tab5</h2>
</div>
<div class="undis" id="tbc_06">
<h2>Tab6</h2>
</div>
</div>
</div>
<!--tab结束-->
</div>
</div>
</form>
</body>
</html>
Tab.css
/*tab效果*/
.normaltab { background-image:url('../images/systemframe/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif'); background-repeat: no-repeat; color:#729CD2 ; font-weight:bold;}
.hovertab { background-image: url('../images/systemframe/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif'); background-repeat: no-repeat; color: #1F3A87; font-weight:bold }
.dis{
display:block;
color: #319FAA;
}
.undis{display:none;}
/*Tab布局
最外层div:*/
.tab{
height:300px;
width:540px;
border:#A8B7CC solid 1px;
}
/*第二层div:*/
.w936{
clear:both;
width:540px;/*婊戝姩闂ㄧ殑瀹藉害*/
height:300px;
clear:both;
}
/*菜单层div:*/
.tb_{
background-image:url(../images/systemframe/tabbg.jpg);
background-repeat:repeat-x;
height: 24px;
padding-top:2px;
text-align:center;
width: 540px;
}
.tb_ ul{height:24px; float:left; margin:0px; padding:0px;color:Red;}
.tb_ li
{
list-style:none;
float:left;
height: 24px;
line-height:1.9;
width: 90px;
cursor:pointer;
margin-top: 6px; !important;
margin-top:0px;
font-size: 14px;
}
/*展开层div:*/
.ctt{
height:auto;
width:520px;
padding:6px;
clear:both;
}