标签控件应用示例三

这个示例中，各个 Tab 的 title 之间有间隙，其实代码和标签控件应用示例二，完全一样，只是 title 的背景小了一些，由于样式表的控制，背景不会重复，也就留下了白色的间隙（当然也可以在更改 HTML 代码和 CSS 的基础上产生这种白色间隙），也是在我们希望的位置显示背景。

<!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=gb2312" />
<title>千一控件－标签控件</title>
<style type="text/css">
body,
a:link,
a:visited,
a:hover
{
    font-size:13px;
    line-height:150%;
}
/*========================================*/
.block
{
    width:320px;
}
/*========================================*/
.titles
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    list-style-type:none;
}

.titles li
{
    float:left;
    width:25%;
    line-height:150%;
    text-align:center;
    cursor:default;
}
/*========================================*/
.normalTitle
{
    background-position:center top;
    background-repeat:no-repeat;
    background-image:url("http://www.cftea.com/c/2007/02/9VOPUL5JSP3Y3KLJ/normalTitle.gif");
}

.activeTitle
{
    background-position:center top;
    background-repeat:no-repeat;
    background-image:url("http://www.cftea.com/c/2007/02/9VOPUL5JSP3Y3KLJ/activeTitle.gif"); 
}

/*========================================*/
.content
{
    display:none;
    clear:both;
    border:1px solid #000000;
    background-color:#EEEEEE;
}

.content ul
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 20px;
}
</style>  
</head>
<body>

<p>如果没有效果或报错，您可能需要刷新本页面。</p>

<div class="block">
<ul class="titles">
  <li class="normalTitle" id="t1"><div>ASP</div></li>
  <li class="normalTitle" id="t2"><div>JavaScript</div></li>
  <li class="normalTitle" id="t3"><div>XHTML+CSS</div></li>
  <li class="normalTitle" id="t4"><div>SQL Server</div></li>
</ul>
<div class="content" id="c1"><ul><li><a href="http://www.cftea.com/c/2006/12/R642K00FOGR6QSNB.asp" target="_blank">如何利用 object 标签创建服务器组件</a></li><li><a href="http://www.cftea.com/c/2006/12/FHDUNK2DSCA568ZE.asp" target="_blank">显示数据库中的表</a></li><li><a href="http://www.cftea.com/c/2006/12/QQWDQCR5VTNPQ064.asp" target="_blank">用 JS 显示公共内容？</a></li><li><a href="http://www.cftea.com/c/2006/12/3GC9M7IT3GURIPWD.asp" target="_blank">charcode 取值</a></li><li><a href="http://www.cftea.com/c/2006/12/6RFP1TJUJLGL26SQ.asp" target="_blank">IIS 上建立多站点</a></li><li><a href="http://www.cftea.com/c/2006/11/HVIOJQ3QBWFG6KZB.asp" target="_blank">如何连接有数据库密码的 Access</a></li></ul></div>
<div class="content" id="c2"><ul><li><a href="http://www.cftea.com/c/2006/12/WOYNSH75QM4NPFRS.asp" target="_blank">scrollTop scrollLeft scrollWidth scrollHeight</a></li><li><a href="http://www.cftea.com/c/2006/12/0DU87TLSHFMGIMMY.asp" target="_blank">offsetTop 与 style.top 的区别</a></li><li><a href="http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp" target="_blank">offsetTop offsetLeft offsetWidth offsetHeight</a></li><li><a href="http://www.cftea.com/c/2006/12/4G79XCX3L2V9BDSB.asp" target="_blank">optgroup</a></li><li><a href="http://www.cftea.com/c/2006/12/TWGPVGOI4XVG4X5V.asp" target="_blank">FlyAds 网友订制版本</a></li><li><a href="http://www.cftea.com/c/2006/12/ENKADABBQ538IJZM.asp" target="_blank">body.onload 的位置</a></li></ul></div>
<div class="content" id="c3"><ul><li><a href="http://www.cftea.com/c/2006/12/01T8G62S9RMC4WC7.asp" target="_blank">如何为 a 的 class 写样式</a></li><li><a href="http://www.cftea.com/c/2006/12/8QRIDC2BUBXIB50R.asp" target="_blank">dl、dt、dd 标签的使用</a></li><li><a href="http://www.cftea.com/c/2006/11/7YFAJ81G7ZT6C1HX.asp" target="_blank">DOCTYPE 使 IE 支持 W3C 标准？</a></li><li><a href="http://www.cftea.com/c/2006/11/FETZYL4LRF7TV1QI.asp" target="_blank">样式表注意大小写</a></li><li><a href="http://www.cftea.com/c/2006/11/43F681ZJDC50897M.asp" target="_blank">span 套 div 错误</a></li><li><a href="http://www.cftea.com/c/2006/11/W45JNEXGBF8RVH52.asp" target="_blank">用百分比表示字体大小</a></li></ul></div>
<div class="content" id="c4"><ul><li><a href="http://www.cftea.com/c/2006/12/Q0FRNASGI7WX5GO3.asp" target="_blank">在视图上创建触发器</a></li><li><a href="http://www.cftea.com/c/2006/12/B4GPUUP01YGQ47IE.asp" target="_blank">如何在视图上创建索引</a></li><li><a href="http://www.cftea.com/c/2006/12/TBQ87P80C80Y0ZUF.asp" target="_blank">忽略重复键</a></li><li><a href="http://www.cftea.com/c/2006/12/9M4AFUD0YJV2LMY2.asp" target="_blank">重复记录－题外</a></li><li><a href="http://www.cftea.com/c/2006/12/LG1450RXYDTSNRFQ.asp" target="_blank">重复记录－避免</a></li><li><a href="http://www.cftea.com/c/2006/12/7N88QNXEMWIWOHT1.asp" target="_blank">重复记录－删除</a></li></ul></div>
</div>
<script language="javascript" type="text/javascript" src="http://www.cftea.com/products/webComponents/TabCtrl/CTabCtrl.js"></script>
<script language="javascript" type="text/javascript">
<!--
//千一网络 www.cftea.com

var tab = new CTabCtrl("tab", "normalTitle", "activeTitle");
tab.BindItem("t1", "c1");
tab.BindItem("t2", "c2");
tab.BindItem("t3", "c3");
tab.BindItem("t4", "c4");
tab.ActivateItem(0);
-->
</script>
</body>
</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

ASP.NET 中的 AJAX	ASP.NET 画图全接触	ASP.NET 与 XML	声明式数据绑定	ASP.NET 网页抓取
C# 基础	C# 类教程	C# 加密	ASP.NET 成员资格	非“自动化”处理 Excel
QuickAjax	Ajax	完美的语法高亮器	Silverlight	Popfly