【 认真工作，享受生活 】

笑中千关过，愁内百事哀，争胜是祸，繁华似梦，平淡是福。
随笔 - 57, 文章 - 0, 评论 - 12, 阅读 - 11万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

CSS+JavaScript 实现TabPane页签

Posted on   qiqi  阅读(2886)  评论(1)  编辑  收藏  举报

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:"CSDN 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:"CSDN 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 CSDN 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";
}
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示