开发学院网页设计 JavaScript CSS+JavaScript 实现TabPane页签阅读

CSS+JavaScript 实现TabPane页签

　2010-09-14 13:37:10　来源：WEB开发网　　　

核心提示：CSS+JavaScript 实现TabPane页签功能，支持二级tabPane（tabPane嵌套），CSS+JavaScript 实现TabPane页签，如果标题的长度大于设置的width值，则用“...”来显示，在HTML页面中引入一个CSS文件，和一个JavaScript文件，但是FF不

CSS+JavaScript 实现TabPane页签功能，支持二级tabPane（tabPane嵌套）。

如果标题的长度大于设置的width值，则用“...”来显示。但是FF不支持该效果，由于CSS水平有限，暂时没有修改！-　-

效果如下图：

CSS+JavaScript 实现TabPane页签

使用前提，在HTML页面中引入一个CSS文件，和一个JavaScript文件。如下：

<HEAD> 　<TITLE>Css+Javascript=tabPane</TITLE> 　<METANAME="Author"CONTENT="majianan"> 　<scripttype="text/javascript"src="tabPane.js"></script> 　　<linktype="text/css"rel="stylesheet"　href="tabPane.css"　/> </HEAD>

引入CSS文件：<linktype="text/css"rel="stylesheet"　href="tabPane.css"　/>

引入JavaScript文件：<scripttype="text/javascript"src="tabPane.js"></script>

代码见后

对于每一个tab页分别创建一个DIV来显示。例如代码中的"testTabDiv"、"basicInfo"、"btns1"等

<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:"basicInfo2",width:150,panel:"basicInfo2"}); 　　tp.addTabPage({title:"btns1",width:150,panel:"btns1"}); 　　</script>