CSS+JavaScript 实现TabPane页签

最新推荐文章于 2021-08-04 00:19:16 发布
最新推荐文章于 2021-08-04 00:19:16 发布
阅读量5.5k 收藏 1
点赞数
分类专栏： 【01】JavaScript 文章标签： javascript css border div function class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/majianan/article/details/3646565
版权

CSS+JavaScript 实现TabPane页签

马嘉楠    2008-12-30

 

共同学习，欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2008/12/30/3646565.aspx】，谢谢！

 

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

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

 

效果如下图：

1.

 

  • 使用前提，在HTML页面中引入一个CSS文件，和一个JavaScript文件。如下：
  1.  <HEAD>
  2.   <TITLE>Css + Javascript = tabPane</TITLE>
  3.   <META NAME="Author" CONTENT="majianan">
  4.   <script type="text/javascript" src="tabPane.js"></script>
  5.     <link type="text/css" rel="stylesheet"  href="tabPane.css"  />
  6.  </HEAD>

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

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

代码见后

 

  • 对于每一个tab页分别创建一个DIV来显示。例如代码中的"testTabDiv"、"basicInfo"、"btns1"等
  1. <BODY>
  2.     
  3. <div id="testTabDiv" style="width:800px;"></div>
  5. <div id="basicInfo" style="padding:8px;">       
  6.     <table>
  7.         <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
  8.         <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
  9.         <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
  10.         <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>         
  11.         <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
  12.         <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
  13.         <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
  14.     </table>
  15. </div>
  17. <div id="btns" style="padding:8px;"></div> 
  19. <div id="myBlog" style="padding:8px;">
  20.  <iframe src="http://www.baidu.com" style="width:95%;height:500">
  21. </iframe>
  22. </div> 
  24. <div id="btns1" style="padding:8px;">
  25.     <table border="0" cellpadding="0" cellspacing="1" class="border5"  bgcolor="#BCDDF8">
  26.         <tr id="trEdit">
  27.             <td><input class="button" type="button" value="Edit" style="width:100px"></td>
  28.         </tr>
  29.         <tr id="trDel">
  30.             <td><input class="button" type="button" value="Delete" style="width:100px"></td>
  31.         </tr>
  32.     </table>
  33. </div> 
  34. <div id="basicInfo1" style="padding:8px;">      
  35. <table>     
  36.     <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
  37.     <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
  38.     <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
  39. </table>
  40. </div>
  42. <div id="basicInfo2" style="padding:8px;height:300">        
  43. <table>
  44.     <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
  45.     <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
  46.     <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
  47.     <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>
  48. </table>
  49. </div>
  51.  </BODY>
  52.  <script>
  53.     var tp = new TabPane("testTabDiv");
  54.     tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo"});
  55.     tp.addTabPage({title:"CSDN Blog Web JavaScript" ,width:100 ,panel:"btns"});     
  56.     tp.addTabPage({title:"My Blog URL" ,width:100 ,panel:"myBlog"});
  57.         
  58.     tp = new TabPane("btns");
  59.     tp.addTabPage({title:"basicInfo1" ,width:150 ,panel:"basicInfo1"});
  60.     tp.addTabPage({title:"basicInfo2" ,width:150 ,panel:"basicInfo2"});
  61.     tp.addTabPage({title:"btns1" ,width:150 ,panel:"btns1"});
  62.     </script>
  • 生成tab页JavaScript代码说明：

1）var tp = new TabPane("testTabDiv");

    创建一个tab页，参数为一个String：目标DIV的id。

2） tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo"});

    向tab页中添加内容。

    参数为一个Object：包括title、width、panel等属性。

        title：tab页显示的标题。

        width：设置标题的宽度。

        panel：tab页中所要显示的DIV.id。

3）二级tab页，只需要重复上面操作即可。例如

    tp = new TabPane("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为：

  1. div{
  2.   width:    100%;
  3.   height:   auto;
  4. }

也可以在DIV中特殊说明，例如：<div id="basicInfo2" style="padding:8px;height:300">        

 

 

测试代码

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.   <TITLE>Css + Javascript = tabPan</TITLE>
  5.   <META NAME="Author" CONTENT="majianan">
  6.   <script type="text/javascript" src="tabPane.js"></script>
  7.     <link type="text/css" rel="stylesheet"  href="tabPane.css"  />
  8.  </HEAD>
  9. <BODY>
  10.     
  11. <div id="testTabDiv" style="width:800px;"></div>
  13. <div id="basicInfo" style="padding:8px;">       
  14.     <table>
  15.         <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
  16.         <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
  17.         <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
  18.         <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>         
  19.         <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
  20.         <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
  21.         <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
  22.     </table>
  23. </div>
  25. <div id="btns" style="padding:8px;"></div> 
  27. <div id="myBlog" style="padding:8px;">
  28.  <iframe src="http://www.baidu.com" style="width:95%;height:500">
  29. </iframe>
  30. </div> 
  32. <div id="btns1" style="padding:8px;">
  33.     <table border="0" cellpadding="0" cellspacing="1" class="border5"  bgcolor="#BCDDF8">
  34.         <tr id="trEdit">
  35.             <td><input class="button" type="button" value="Edit" style="width:100px"></td>
  36.         </tr>
  37.         <tr id="trDel">
  38.             <td><input class="button" type="button" value="Delete" style="width:100px"></td>
  39.         </tr>
  40.     </table>
  41. </div> 
  42. <div id="basicInfo1" style="padding:8px;">      
  43. <table>     
  44.     <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
  45.     <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
  46.     <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
  47. </table>
  48. </div>
  50. <div id="basicInfo2" style="padding:8px;height:300">        
  51. <table>
  52.     <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
  53.     <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
  54.     <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
  55.     <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>
  56. </table>
  57. </div>
  59.  </BODY>
  60.  <script>
  61.     var tp = new TabPane("testTabDiv");
  62.     tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo"});
  63.     tp.addTabPage({title:"CSDN Blog Web JavaScript" ,width:100 ,panel:"btns"});     
  64.     tp.addTabPage({title:"My Blog URL" ,width:100 ,panel:"myBlog"});
  65.         
  66.     tp = new TabPane("btns");
  67.     tp.addTabPage({title:"basicInfo1" ,width:150 ,panel:"basicInfo1"});
  68.     tp.addTabPage({title:"basicInfo2 CSDN Blog" ,width:100 ,panel:"basicInfo2"});
  69.     tp.addTabPage({title:"btns1" ,width:150 ,panel:"btns1"});
  70.     </script>
  71. </HTML>

 

 

tabPane.js

 

  1. var TabPaneConfig = {
  2.     idPrefix: "tab-panel-object-",
  3.     idCounter: 0,
  4.     getId: function(){ return this.idPrefix+this.idCounter++;},
  5.     tabHeadId: "tabHead",
  6.     tabHeadClass: "tab-head tab-border",
  7.     tabBodyId: "tabBody",
  8.     tabBodyClass: "tab-border"
  9. }
  11. function TabPane(id){
  12.     this.id = id;
  13.     this.height = "100%";
  14.     this.width = "100%";
  15.     
  16.     this.tabPages = 0;
  17.     this.head = null;
  18.     this.body = null;   
  19. }
  21. TabPane.prototype.init = function(){    
  22.     var r = document.getElementById(this.id);
  23.     if(!r.style.overflow)   r.style.overflow = "auto";
  24.     r.className = "tab";
  25.     
  26.     //create head
  27.     var div = document.createElement("div");
  28.     div.id = TabPaneConfig.tabHeadId;
  29.     div.className = TabPaneConfig.tabHeadClass;
  30.     
  31.     r.appendChild(div);
  32.     this.head = div;
  33.     
  34.     var ul = document.createElement("ul");
  35.     div.appendChild(ul);
  36.     
  37.     //create body
  38.     div = document.createElement("div");
  39.     div.id = TabPaneConfig.tabBodyId;
  40.     div.className = TabPaneConfig.tabBodyClass;
  41.     
  42.     r.appendChild(div); 
  43.     this.body = div;
  44. }
  47. TabPane.prototype.addTabPage = function(obj){
  48.     if(!document.getElementById(obj.panel)) return;
  49.     if(!this.tabPages)  this.init();    
  50.         
  51.     this.head.firstChild.appendChild(this.createTabTitle(obj));
  52.     this.body.appendChild(document.getElementById(obj.panel));  
  53.     this.tabPages++;
  54. }
  56. TabPane.prototype.createTabTitle = function(obj){
  57.     var li = document.createElement("li");
  58.     li.id = TabPaneConfig.getId();  
  59.     li.data = obj.panel;
  60.     li.οnclick=tabOnClick;
  61.     li.style.width = obj.width;
  62.     
  63.     if(this.tabPages){
  64.         li.className="";
  65.         document.getElementById(obj.panel).style.display="none";    
  66.     }else{
  67.         li.className="hover";
  68.         document.getElementById(obj.panel).style.display="block";   
  69.     }
  70.         
  71.     var textNode = document.createTextNode(obj.title);
  72.     li.appendChild(textNode);
  73.     
  74.     return li;
  75. }
  77. function tabOnClick(){  
  78.   var event = window.event || arguments[0];
  79.   var element = event.srcElement || event.target;  
  80.     var liArr = element.parentNode.getElementsByTagName("li");
  81.     for(var i=0; i<liArr.length; i++){
  82.         liArr[i].className="";
  83.         document.getElementById(liArr[i].data).style.display="none";
  84.     }
  85.     element.className="hover";  
  86.     document.getElementById(element.data).style.display="block";
  87. }

tabPane.css

 

  1. div{
  2.     width:  100%;
  3.     height: auto;
  4. }
  5. .tab {
  6.     font-family:    Verdana, Helvetica, Arial;
  7.     font-size:      12px;
  8.     position:   relative;
  9.     width:      100%;
  10. }
  11. .tab-border {border:1px solid;border-color: rgb(120,172,255);}
  12. .tab-head {
  13.     background-color:rgb(234,242,255);;
  14.     border:0px;
  15.     height:23px;
  16.     line-height:20px;
  17.     position:relative;  
  18. }
  19. .tab-head ul{
  20.     border:0px;
  21.     height:23px;
  22.     list-style:none;     
  23.     margin:0px;     
  24.     text-align:center;
  25.     padding:0;
  26.     position:absolute;
  27.     
  28. }
  29. .tab-head li{   
  30.     border: 1px solid;
  31.     border-color:   rgb(120,172,255);
  32.     border-left:    0;
  33.     border-bottom:  0;
  34.     border-top:     0;
  35.     cursor:pointer;
  36.     color:#416AA3;  
  37.     float:left;
  38.     display:block;
  39.     height:22px;!important;height:20px;
  40.     line-height:20px; 
  41.     padding:        2px 6px 0px 6px;
  42.     margin-top: 2px;
  43.     margin-right:   -1px;
  44.     text-overflow:ellipsis; 
  45.     white-space:nowrap; 
  46.     overflow:hidden;
  48. }
  49. .tab-head li.hover{
  50.     border:         1px solid rgb(120,172,255);
  51.     border-bottom:  0;
  52.     padding:        0px 6px 3px 6px;
  53.     margin:         0px 1px 0px 0px;
  54.     background:     white;
  55.     font-size:          13px;
  56.     font-weight:    bold;
  57.     color:              rgb(0,66,174);
  58.     overflow:visible;   
  59. }
majianan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Table+CSS实现的TabPane 选项卡代码实例
05-29
Table+CSS实现的TabPane 选项卡代码实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
tabpane--js的tab控件
seawavecau的专栏
08-03 1619
tabpane--js的tab控件 引用源：webfx.eae.net/dhtml/tabpane/tabpane.html
用javascript写tabPanel
zyy_jay的专栏
11-01 193
[code="java"] /*------------tab----------*/ .tabItemContainer{ height:30px; overflow:hidden; background:#F7F7F7 url(dot.gif) bottom repeat-x; margin-bottom:6px; } .tabItem...
css tab选中居中,使用CSS在tabpane中居中选项卡
weixin_30822467的博客
08-04 668
这不是一个简洁的解决方案，它更像是一种解决方法。由于tabpane的子结构由stackpanes组成，因此默认情况下这些stackpanes对齐到center。但是标签没有与中心对齐，这意味着皮肤代码中存在自定义布局。在阅读tabpane皮肤代码后，可以找到正确的解决方案。Platform.runLater(new Runnable() {@Overridepublic void run() {f...
采用Table+CSS实现的TabPane选项卡特效代码
03-20
在提供的文件列表中没有提及JavaScript文件，所以可能是通过简单的CSS伪类实现切换，或者在外部的JS文件中实现了这一功能。 对于"33"这个文件名，由于缺少具体扩展名，很难判断它是什么类型的文件。如果它是CSS或...
javascript动态添加删除tabs标签的方法
10-23
本篇文章将深入探讨如何使用JavaScript实现这一功能，包括对页面元素的操作技巧。 首先，我们需要理解tabs的基本结构。通常，tabs由一组标签（`<li>`）和对应的面板（`<div>`）组成。当用户点击一个标签时，对应的...
采用Table CSS实现的TabPane选项卡.rar
07-05
"采用Table CSS实现的TabPane选项卡"是一个利用CSS样式表来构建Tab Pane功能的例子。在这个项目中，我们将深入探讨如何使用纯CSS来创建这种效果，以及为何选择使用表格布局（Table CSS）。 首先，让我们理解什么是...
js实现tabpane demo
12-05
本示例着重讲解如何使用纯JavaScript实现一个基本的Tabpane功能，帮助开发者理解如何控制不同内容的显示与隐藏。 首先，我们需要创建HTML结构，它包括一个包含所有选项卡的容器和一个用于展示内容的区域。每个选项...
CSS 制作页签tabpane
老刘SAP!（锅炉压力容器）
03-23 665
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档td { font-size: 12px;color: #000000;line-height: 150%;}.sec1 { background-color: #EEEEEE;cursor: hand;color:
多款精美的tab页签样式任你挑选
05-12
多款好看的tab页签样式，希望对你有所帮助
很好用的一个JS实现TabMenu
lansky07
07-21 3510
 一个页面中有太多的内容得拉滚动条才能看到所有的内容，如果使用WebF可以实现漂亮的Tab Pane,用它不但可以把零乱的Sidebar内容整合，而且还能动态地显示出各各内容，节省了空间，页面又变得整洁，甚是实用.1. 首先需要下载TabPane的源代码, 然后将其中的CSS, JS, LOCAL目录和demo.html, memdemo.html, tabpane.html解压到工程目录中
HTML+CSS 基础 之页签
雾气
10-13 4708
HTML: 超文本标记语言 编写helloworld 列表介绍 列表形式. A连接介绍        页面标签 图片标签 表格标签 表格合并：上下合并rowspan（下删）/左右合并colspan（同行） Form表单    &lt;form method="po...
右侧边栏书签效果
weixin_42555053的博客
03-26 309
这里写自定义目录标题工作需要创建一个侧边栏展开收起的书签容器HTML部分代码css部分代码JS效果交互部分代码效果展示 工作需要创建一个侧边栏展开收起的书签容器 只是简单的功能实现，没有加入动画过渡效果，供以后需要时使用 HTML部分代码 <div class="ag-right-box"> <div class="div-content"> <div class="title"> 任务点
纯CSS实现页签切换效果
weixin_34238633的博客
07-30 882
主要运用了 CSS3 的 :checked 选择器， 代码结构跟使用js差不多，只是多了几个radio， 不知道性能上是js快还是css快呢？ codepen地址：http://codepen.io/YuanWing/pen/RPqvad <!DOCTYPE html> <html lang="en"> &lt...
CSS实例(四)：实现TabView(页签)效果
无名指的约定
08-19 2648
今天花了点时间，设计了一个网页上用的tabview(页签、tabcontrol)效果，网页元素用得比较少，js代码也比较精练。测试了一下支持IE、FireFox以及chrome。支持同一页面上多处使用。 　　没有什么过多说的。先看一下效果。 页面中用到一个图片： 页面代码如下： Html代码   >  html xmlns="http:
html div 做成页签,纯CSS实现页签切换效果
weixin_36341500的博客
05-31 446
主要运用了 CSS3 的 :checked 选择器，代码结构跟使用js差不多，只是多了几个radio，不知道性能上是js快还是css快呢？CSS3 TABbody {font-family: 'Microsoft YaHei';font-size: 14px;background-color: #f5f4f7;margin: 0;color: #252525;}a {text-decoration...
php 多页签,CSS_div css 实现tabs标签的思路及示例代码，1、创建页签，以及页签内容的 - phpStudy...
weixin_36393744的博客
03-13 167
div css 实现tabs标签的思路及示例代码1、创建页签，以及页签内容的div。2、编写被选中的页签和页签内容div显示、隐藏的样式。3、编写js方法，根据被选中的页签，显示相应的页签内容。例如：复制代码代码如下:function doClick(o){//当前被中的对象设置csso.className="nav_current";var j;var id;var e;//遍历所有的页签，没有...
javafx tabPane的tab能用css样式吗
最新发布
07-08
是的，你可以使用CSS样式来自定义JavaFX的TabPane中的Tab。你可以通过设置Tab的style类来应用样式。以下是一个示例代码： ```java TabPane tabPane = new TabPane(); Tab tab1 = new Tab("Tab 1"); Tab tab2 = new Tab("Tab 2"); Tab tab3 = new Tab("Tab 3"); tab1.getStyleClass().add("my-tab"); tab2.getStyleClass().add("my-tab"); tab3.getStyleClass().add("my-tab"); tabPane.getTabs().addAll(tab1, tab2, tab3); ``` 在上面的代码中，我们首先创建了一个TabPane，并创建了三个Tab（tab1、tab2和tab3）。然后，我们通过调用`getStyleClass().add()`方法将样式类`my-tab`应用到每个Tab上。 接下来，在CSS文件中，你可以使用样式类选择器`.my-tab`来定义Tab的样式： ```css .my-tab { -fx-background-color: blue; -fx-text-fill: white; -fx-font-size: 16px; } ``` 在上面的例子中，我们将Tab的背景颜色设置为蓝色，文本颜色设置为白色，并设置了字体大小。 希望这对你有帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值