CSS+JavaScript 实现TabPane页签

最新推荐文章于 2025-06-25 10:40:22 发布
最新推荐文章于 2025-06-25 10:40:22 发布
阅读量2k 收藏 1
点赞数
本文介绍如何利用 CSS 和 JavaScript 实现 TabPane 的功能，并支持二级嵌套。通过简单的 HTML 结构配合特定的样式和脚本，可以轻松创建交互式的标签页组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

 

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

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

 

效果如下图：


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

 

 <HEAD>  
  <TITLE>Css + Javascript = tabPane</TITLE>  
  <META NAME="Author" CONTENT="majianan">  
  <script type="text/javascript" src="tabPane.js"></script>  
    <link type="text/css" rel="stylesheet"  href="tabPane.css"  />  
 </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"等

 

<BODY>  
     
<div id="testTabDiv" style="width:800px;"></div>  

<div id="basicInfo" style="padding:8px;">         
    <table>  
        <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>  
        <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>  
        <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>  
        <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>           
        <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>  
        <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>  
        <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>  
    </table>  
</div>  

<div id="btns" style="padding:8px;"></div>   

<div id="myBlog" style="padding:8px;">  
 <iframe src="http://www.baidu.com" style="width:95%;height:500">  
</iframe>  
</div>   

<div id="btns1" style="padding:8px;">  
    <table border="0" cellpadding="0" cellspacing="1" class="border5"  bgcolor="#BCDDF8">  
        <tr id="trEdit">  
            <td><input class="button" type="button" value="Edit" style="width:100px"></td>  
        </tr>  
        <tr id="trDel">  
            <td><input class="button" type="button" value="Delete" style="width:100px"></td>  
        </tr>  
    </table>  
</div>   
<div id="basicInfo1" style="padding:8px;">        
<table>       
    <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>  
    <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>  
    <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>  
</table>  
</div>  

<div id="basicInfo2" style="padding:8px;height:300">          
<table>  
    <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>  
    <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>  
    <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>  
    <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>  
</table>  
</div>  

 </BODY>  
 <script>  
    var tp = new TabPane("testTabDiv" ); 
    tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo" }); 
    tp.addTabPage({title:"优快云 Blog Web JavaScript" ,width:100 ,panel:"btns" });      
    tp.addTabPage({title:"My Blog URL" ,width:100 ,panel:"myBlog" }); 
         
    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" }); 
    </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为：

 

div{  
  width:    100%;  
  height:   auto;  
}

 

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

 

 

测试代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
   <TITLE>Css + Javascript = tabPan</TITLE>
   <META NAME="Author" CONTENT="majianan">
   <script type="text/javascript" src="tabPane.js"></script>
     <link type="text/css" rel="stylesheet"  href="tabPane.css"  />
  </HEAD>
<BODY>
    
 <div id="testTabDiv" style="width:800px;"></div>
 
 <div id="basicInfo" style="padding:8px;">         
    <table>
         <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
         <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
         <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
         <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>             
        <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
         <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
         <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
     </table>
</div>

<div id="btns" style="padding:8px;"></div>  

<div id="myBlog" style="padding:8px;">
  <iframe src="http://www.baidu.com" style="width:95%;height:500">
</iframe>
</div>  

<div id="btns1" style="padding:8px;">
     <table border="0" cellpadding="0" cellspacing="1" class="border5"  bgcolor="#BCDDF8">
         <tr id="trEdit">
             <td><input class="button" type="button" value="Edit" style="width:100px"></td>
         </tr>
         <tr id="trDel">
             <td><input class="button" type="button" value="Delete" style="width:100px"></td>
         </tr>
     </table>
</div>  
<div id="basicInfo1" style="padding:8px;">         
<table>         
    <tr><td>公 司:</td><td><input type="text" id="text5" /></td></tr>
     <tr><td>职 务:</td><td><input type="text" id="text5" /></td></tr>
     <tr><td>年 薪:</td><td><input type="text" id="text5" /></td></tr>
</table>
</div>

<div id="basicInfo2" style="padding:8px;height:300">         
<table>
     <tr><td>姓 名:</td><td><input type="text" id="text1" /></td></tr>
     <tr><td>性 别:</td><td><input type="text" id="text2" /></td></tr>
     <tr><td>民 族:</td><td><input type="text" id="text3" /></td></tr>
     <tr><td>学 历:</td><td><input type="text" id="text4" /></td></tr>
</table>
</div>

  </BODY>
  <script>
      var tp = new TabPane("testTabDiv" );
     tp.addTabPage({title:"Test New Func" ,width:100 ,panel:"basicInfo" });
     tp.addTabPage({title:"优快云 Blog Web JavaScript" ,width:100 ,panel:"btns" });     
     tp.addTabPage({title:"My Blog URL" ,width:100 ,panel:"myBlog" });
          
     tp = new TabPane("btns" );
     tp.addTabPage({title:"basicInfo1" ,width:150 ,panel:"basicInfo1" });
     tp.addTabPage({title:"basicInfo2 优快云 Blog" ,width:100 ,panel:"basicInfo2" });
     tp.addTabPage({title:"btns1" ,width:150 ,panel:"btns1" });
     </script>
</HTML>

tabPane.css
div{
    width :    100%;
    height :    auto;
}
.tab  {
    font-family :    Verdana, Helvetica, Arial;
    font-size :        12px;
    position :    relative;
    width :        100%;
}
.tab-border  {border:1px solid;border-color:    rgb(120,172,255);}
.tab-head  {
    background-color :rgb(234,242,255); ;
    border:0px;
    height :23px;
    line-height :20px;
    position :relative;     
}
.tab-head ul {
    border :0px;
    height :23px;
    list-style :none;       
    margin:0px;       
    text-align:center;
    padding :0;
    position :absolute;
    
 }
.tab-head li {     
    border:    1px solid;
    border-color :    rgb(120,172,255);
    border-left :    0;
    border-bottom :    0;
    border-top :        0;
    cursor :pointer;
    color :#416AA3;     
    float:left;
    display :block;
    height :22px;!important;height:20px;
    line-height :20px;  
    padding:        2px 6px 0px 6px;
    margin-top :    2px;
    margin-right :    -1px;
    text-overflow :ellipsis;  
    white-space:nowrap;  
    overflow:hidden;

}
.tab-head li.hover {
    border :            1px solid rgb(120,172,255);
    border-bottom :    0;
    padding :        0px 6px 3px 6px;
    margin :            0px 1px 0px 0px;
    background :        white;
    font-size :            13px;
    font-weight :    bold;
    color :                rgb(0,66,174);
    overflow :visible;     
}


tabPane.js
var TabPaneConfig =  {
    idPrefix: "tab-panel-object-" ,
    idCounter: 0 ,
    getId: function(){ return this.idPrefix+this.idCounter++ ;},
    tabHeadId: "tabHead" ,
    tabHeadClass: "tab-head tab-border" ,
    tabBodyId: "tabBody" ,
    tabBodyClass: "tab-border"
}

 function  TabPane(id){
    this.id =  id;
    this.height = "100%" ;
    this.width = "100%" ;
    
    this.tabPages = 0 ;
    this.head = null ;
    this.body = null ;    
}

TabPane.prototype.init = function (){    
    var r = document.getElementById(this .id);
    if(!r.style.overflow)    r.style.overflow = "auto" ;
    r.className = "tab" ;
    
    //create head
    var div = document.createElement("div" );
    div.id =  TabPaneConfig.tabHeadId;
    div.className =  TabPaneConfig.tabHeadClass;
    
    r.appendChild(div);
    this.head =  div;
    
    var ul = document.createElement("ul" );
    div.appendChild(ul);
    
    //create body
    div = document.createElement("div" );
    div.id =  TabPaneConfig.tabBodyId;
    div.className =  TabPaneConfig.tabBodyClass;
    
    r.appendChild(div);    
    this.body =  div;
}


TabPane.prototype.addTabPage = function (obj){
    if(!document.getElementById(obj.panel)) return ;
    if(!this.tabPages)  this .init();    
        
    this.head.firstChild.appendChild(this .createTabTitle(obj));
    this .body.appendChild(document.getElementById(obj.panel));    
    this.tabPages++ ;
}

TabPane.prototype.createTabTitle = function (obj){
    var li = document.createElement("li" );
    li.id =  TabPaneConfig.getId();    
    li.data =  obj.panel;
    li.onclick= tabOnClick;
    li.style.width =  obj.width;
    
    if(this .tabPages){
        li.className="" ;
        document.getElementById(obj.panel).style.display="none" ;    
    }else {
        li.className="hover" ;
        document.getElementById(obj.panel).style.display="block" ;    
    }
        
    var textNode =  document.createTextNode(obj.title);
    li.appendChild(textNode);
    
    return  li;
}

function  tabOnClick(){    
  var event = window.event || arguments[0 ];
  var element = event.srcElement ||  event.target;  
    var liArr = element.parentNode.getElementsByTagName("li" );
    for(var i=0; i<liArr.length; i++ ){
        liArr[i].className="" ;
        document.getElementById(liArr[i].data).style.display="none" ;
    }
    element.className="hover" ;    
    document.getElementById(element.data).style.display="block" ;
}


fanyuna
关注
Table+CSS实现的TabPane 选项卡代码实例
05-29
Table+CSS实现的TabPane 选项卡代码实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.youkuaiyun.com/
采用Table+CSS实现的TabPane选项卡特效代码
03-20
在提供的文件列表中没有提及JavaScript文件，所以可能是通过简单的CSS伪类实现切换，或者在外部的JS文件中实现了这一功能。 对于"33"这个文件名，由于缺少具体扩展名，很难判断它是什么类型的文件。如果它是CSS或...
Tabpane网页布局实现指南
最新发布
weixin_42452483的博客
06-25 981
Tabpane是一种用于展示多个视图的界面组件，通过切换不同的标签页来展示不同的内容区域。它能够有效地组织信息，使用户界面更加整洁且易于导航，广泛应用于数据展示、内容切换和页面布局优化。Tab标题链接(<a>标签)常会用到一些特定属性来实现Tab功能：href属性：指向对应的内容区域id，用于切换显示哪个内容区域。属性：这是Bootstrap框架提供的用来切换Tab内容的属性。属性：这个属性在不使用href属性时使用，指向目标内容区域的选择器。
tabpane--js的tab控件
seawavecau的专栏
08-03 1673
tabpane--js的tab控件 引用源：webfx.eae.net/dhtml/tabpane/tabpane.html
用javascript写tabPanel
zyy_jay的专栏
11-01 249
[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 742
这不是一个简洁的解决方案，它更像是一种解决方法。由于tabpane的子结构由stackpanes组成，因此默认情况下这些stackpanes对齐到center。但是标签没有与中心对齐，这意味着皮肤代码中存在自定义布局。在阅读tabpane皮肤代码后，可以找到正确的解决方案。Platform.runLater(new Runnable() {@Overridepublic void run() {f...
使用JavaScript实现Tabpane功能示例
实现Tabpane功能的代码可以通过多种前端技术来完成，而JavaScript是一种灵活的工具，可以用来控制Tabpane的行为。 ### JavaScript实现Tabpane的知识点 #### 1. HTML结构的设置 要使用JavaScript实现Tabpane，首先...
TabPane选项卡特效的Table+CSS实现方法
根据文件标题，我们介绍了实现TabPane选项卡特效的相关知识点，包括表格的基础使用、CSS的应用、JavaScript交互逻辑的实现，以及特效的性能与兼容性考虑。掌握这些知识点，可以帮助开发者创建出既美观又实用的...
采用Table CSS实现的TabPane选项卡.rar
07-05
"采用Table CSS实现的TabPane选项卡"是一个利用CSS样式表来构建Tab Pane功能的例子。在这个项目中，我们将深入探讨如何使用纯CSS来创建这种效果，以及为何选择使用表格布局（Table CSS）。 首先，让我们理解什么是...
DIV+CSS打造的TabPane组件教程及下载
总结上述知识点，DIV+CSS选项卡是网页开发中常见的组件，它通过DIV、CSS以及JavaScript的配合使用，实现了一种灵活且交互性强的标签页效果。在实际开发过程中，开发者需要兼顾用户体验、代码维护性以及性能优化，...
js实现tabpane demo
12-05
js实现tabpanejs实现tabpanejs实现tabpanejs实现tabpanejs实现tabpane
js实现的Muti TabPage切换
09-21
在很多后台管理系统中，有类似多个TagePage切换页的效果，这里是一个js实现的版本，可以实现TabPage 翻页，切换Tab选项卡，新增Tab,删除Tab等，供学习了解之用！
多款精美的tab页签样式任你挑选
05-12
多款好看的tab页签样式，希望对你有所帮助
CSS 制作页签tabpane
老刘SAP!（锅炉压力容器）
03-23 743
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:
很好用的一个JS实现TabMenu
lansky07
07-21 3556
 一个页面中有太多的内容得拉滚动条才能看到所有的内容，如果使用WebF可以实现漂亮的Tab Pane,用它不但可以把零乱的Sidebar内容整合，而且还能动态地显示出各各内容，节省了空间，页面又变得整洁，甚是实用.1. 首先需要下载TabPane的源代码, 然后将其中的CSS, JS, LOCAL目录和demo.html, memdemo.html, tabpane.html解压到工程目录中
el-tabs的CSS样式修改
AM1n98的博客
05-27 1105
两层tab：即政企版/公众版为第一层tab，日活跃用户统计/月活跃用户统计为第二层tab。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值