WEB开发网      濠电姷鏁告繛鈧繛浣冲洤纾瑰┑鐘宠壘閻ょ偓銇勯幇鍫曟闁稿鍠愰妵鍕冀閵娧佲偓鎺楁⒒閸曨偄顏柡宀嬬畱铻e〒姘煎灡绗戦梻浣筋嚙濮橈箓顢氳濠€浣糕攽閻樿宸ュΔ鐘叉啞缁傚秹宕滆绾惧ジ寮堕崼娑樺缂佹宀搁弻鐔风暋閻楀牆娈楅梺璇″枓閺呯姴鐣疯ぐ鎺濇晝闁靛牆妫欓蹇旂節閻㈤潧浠﹂柛銊ョ埣楠炴劙骞橀鑲╋紱闂佽宕樼粔顔裤亹閹烘挸浜归梺缁樺灦閿曗晛螞閸曨垱鈷戦柟鑲╁仜婵″ジ鎮楀☉鎺撴珖缂侇喖顑呴鍏煎緞濡粯娅囬梻浣瑰缁诲倿寮绘繝鍥ㄦ櫇闁稿本绋撻崢鐢告煟鎼淬垻鈯曢柨姘舵煟韫囥儳绋荤紒缁樼箖缁绘繈宕橀妸褌绱濋梻浣筋嚃閸ㄤ即宕弶鎴犳殾闁绘梻鈷堥弫鍌炴煕閳锯偓閺呮瑧妲愬Ο琛℃斀闁绘劕妯婇崵鐔封攽椤旇棄鍔ら摶鐐烘煕閺囥劌澧柛娆忕箻閺屽秹宕崟顒€娅g紓浣插亾濠㈣泛顑囩粻楣冩煙鐎涙ḿ绠橀柨娑樼У椤ㄣ儵鎮欓鍕紙闂佽鍠栫紞濠傜暦閹偊妲诲┑鈩冨絻椤兘寮诲☉銏犖╅柕澶堝労閸斿绱撴担绋库偓鍝ョ矓瑜版帒鏋侀柟鍓х帛閺呮悂鏌ㄩ悤鍌涘 ---闂傚倸鍊烽悞锔锯偓绗涘厾娲煛閸涱厾顔嗛梺璺ㄥ櫐閹凤拷
开发学院网页设计JavaScript CSS+JavaScript 实现TabPane页签 阅读

CSS+JavaScript 实现TabPane页签

 2010-09-14 13:37:10 来源:WEB开发网 闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�闂傚倸鍊风粈渚€骞夐敓鐘插瀭闁汇垹鐏氬畷鏌ユ煙閹殿喖顣奸柛搴$У閵囧嫰骞掗幋婵冨亾閻㈢ǹ纾婚柟鐐灱濡插牊绻涢崱妤冃℃繛宀婁簽缁辨捇宕掑鎵佹瀸闂佺懓鍤栭幏锟�濠电姷鏁告慨顓㈠箯閸愵喖宸濇い鎾寸箘閹规洟姊绘笟鈧ḿ褍煤閵堝悿娲Ω閳轰胶鍔﹀銈嗗笂閼冲爼鍩婇弴銏$厪闁搞儮鏅涙禒褏绱掓潏鈺佷槐闁轰焦鎹囬弫鎾绘晸閿燂拷闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�  闂傚倸鍊烽懗鑸电仚缂備胶绮〃鍛村煝瀹ュ鍗抽柕蹇曞У閻庮剟姊虹紒妯哄闁诲繑姘ㄩ埀顒佸嚬閸撶喎顫忓ú顏勫瀭妞ゆ洖鎳庨崜浼存⒑闁偛鑻晶顔剧磼婢跺﹦绉虹€殿喖顭锋俊姝岊槷闁稿鎹囧Λ鍐ㄢ槈濞嗗繑娈橀梻浣风串缂嶁偓濞存粠鍓熼崺鈧い鎺戝€归弳顒勬煕鐎n亷韬€规洑鍗冲鍊燁槾闁哄棴绠撻弻銊╂偆閸屾稑顏�
核心提示: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>

1 2 3 4  下一页

Tags:CSS JavaScript 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接