<?xml version="1.0" encoding="gb2312"?>
<!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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TabControl（标签控件）</title>
<style type="text/css">
.block
{
width:292px;
}
.titles,
.contents
{
clear:both;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
}
.titles li
{
float:left;
width:73px;
height:21px;
text-align:center;
line-height:21px;
font-size:13px;
cursor:default;
}
.titles li.normalTitle
{
background-image:url("normalTitle.png");
}
.titles li.hoverTitle
{
background-image:url("hoverTitle.png");
}
.titles li.activatedTitle
{
background-image:url("activatedTitle.png");
}
.contents li
{
padding-top:50px;
padding-bottom:50px;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #999999;
}
</style>
</head>
<body>
<div class="block">
<ul class="titles" id="titles">
<li>TabPage1</li>
<li>TabPage2</li>
<li>TabPage3</li>
<li>TabPage4</li>
</ul>
<ul class="contents" id="contents">
<li>TabPage1</li>
<li>TabPage2</li>
<li>TabPage3</li>
<li>TabPage4</li>
</ul>
</div>
<div class="block">
<hr />
</div>
<div class="block">
<ul class="titles" id="titles2">
<li>TabPage1</li>
<li>TabPage2</li>
<li>TabPage3</li>
<li>TabPage4</li>
</ul>
<ul class="contents" id="contents2">
<li>TabPage1</li>
<li>TabPage2</li>
<li>TabPage3</li>
<li>TabPage4</li>
</ul>
</div>
<script language="javascript" type="text/javascript" src="TabControl.js"></script>
<script language="javascript" type="text/javascript">
<!--
//千一网络 www.cftea.com
var tabControl = new TabControl("normalTitle", "", "activatedTitle", "mouseover");
tabControl.bindTabPagesByContainerId("titles", "contents");
tabControl.activateTabPage(0);
var tabControl2 = new TabControl("normalTitle", "hoverTitle", "activatedTitle", "click");
tabControl2.bindTabPagesByContainerId("titles2", "contents2");
tabControl2.activateTabPage(0);
//-->
</script>
</body>
</html>
简单webform仿Winform TabControl标签页
5星 · 超过95%的资源 需积分: 39 37 浏览量
2010-05-25
13:47:40
上传
评论
收藏 4KB RAR 举报 
js仿Winform TabControl.rar （5个子文件） 
js仿Winform TabControl 
TabControl.js 5KB
activatedTitle.png 218B normalTitle.png 312B hoverTitle.png 326B demo.htm 2KB
- 1
- 2
- 3
前往页