CSS+JavaScript 实现TabPane页签
2010-09-14 13:37:10 来源：WEB开发网生成tab页JavaScript代码说明：
1）vartp=newTabPane("testTabDiv");
创建一个tab页，参数为一个String：目标DIV的id。
2）tp.addTabPage({title:"TestNewFunc",width:100,panel:"basicInfo"});
向tab页中添加内容。
参数为一个Object：包括title、width、panel等属性。
title：tab页显示的标题。
width：设置标题的宽度。
panel：tab页中所要显示的DIV.id。
3）二级tab页，只需要重复上面操作即可。例如
tp=newTabPane("btns");
tp.addTabPage({title:"basicInfo1",width:150,panel:"basicInfo1"});
tp.addTabPage({title:"basicInfo2",width:150,panel:"basicInfo2"});
tp.addTabPage({title:"btns1",width:150,panel:"btns1"});
4）DIV的默认style为：
div{
width: 100%;
height: auto;
}
也可以在DIV中特殊说明，例如：<divid="basicInfo2"style="padding:8px;height:300">
测试代码
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>Css+Javascript=tabPan</TITLE>
<METANAME="Author"CONTENT="majianan">
<scripttype="text/javascript"src="tabPane.js"></script>
<linktype="text/css"rel="stylesheet" href="tabPane.css" />
</HEAD>
<BODY>
<divid="testTabDiv"style="width:800px;"></div>
<divid="basicInfo"style="padding:8px;">
<table>
<tr><td>姓名:</td><td><inputtype="text"id="text1"/></td></tr>
<tr><td>性别:</td><td><inputtype="text"id="text2"/></td></tr>
<tr><td>民族:</td><td><inputtype="text"id="text3"/></td></tr>
<tr><td>学历:</td><td><inputtype="text"id="text4"/></td></tr>
<tr><td>公司:</td><td><inputtype="text"id="text5"/></td></tr>
<tr><td>职务:</td><td><inputtype="text"id="text5"/></td></tr>
<tr><td>年薪:</td><td><inputtype="text"id="text5"/></td></tr>
</table>
</div>
<divid="btns"style="padding:8px;"></div>
<divid="myBlog"style="padding:8px;">
<iframesrc="http://www.baidu.com"style="width:95%;height:500">
</iframe>
</div>
<divid="btns1"style="padding:8px;">
<tableborder="0"cellpadding="0"cellspacing="1"class="border5" bgcolor="#BCDDF8">
<trid="trEdit">
<td><inputclass="button"type="button"value="Edit"style="width:100px"></td>
</tr>
<trid="trDel">
<td><inputclass="button"type="button"value="Delete"style="width:100px"></td>
</tr>
</table>
</div>
<divid="basicInfo1"style="padding:8px;">
<table>
<tr><td>公司:</td><td><inputtype="text"id="text5"/></td></tr>
<tr><td>职务:</td><td><inputtype="text"id="text5"/></td></tr>
<tr><td>年薪:</td><td><inputtype="text"id="text5"/></td></tr>
</table>
</div>
<divid="basicInfo2"style="padding:8px;height:300">
<table>
<tr><td>姓名:</td><td><inputtype="text"id="text1"/></td></tr>
<tr><td>性别:</td><td><inputtype="text"id="text2"/></td></tr>
<tr><td>民族:</td><td><inputtype="text"id="text3"/></td></tr>
<tr><td>学历:</td><td><inputtype="text"id="text4"/></td></tr>
</table>
</div>
</BODY>
<script>
vartp=newTabPane("testTabDiv");
tp.addTabPage({title:"TestNewFunc",width:100,panel:"basicInfo"});
tp.addTabPage({title:"CSDNBlogWebJavaScript",width:100,panel:"btns"});
tp.addTabPage({title:"MyBlogURL",width:100,panel:"myBlog"});
tp=newTabPane("btns");
tp.addTabPage({title:"basicInfo1",width:150,panel:"basicInfo1"});
tp.addTabPage({title:"basicInfo2CSDNBlog",width:100,panel:"basicInfo2"});
tp.addTabPage({title:"btns1",width:150,panel:"btns1"});
</script>
</HTML>
Tags：CSS JavaScript 实现
编辑录入：爽爽 [复制链接] [打 印]
中查找“CSS+JavaScript 实现TabPane页签”更多相关内容
中查找“CSS+JavaScript 实现TabPane页签”更多相关内容更多精彩
赞助商链接
