AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【原】CSS+JavaScript 实现TabPane页签

2017-12-04 973
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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" ;
}


本文转自BlogJavaOo缘来是你oO的博客，原文链接：实现TabPane页签【原】CSS+JavaScript ，如需转载请自行联系原博主。
文章标签：
前端开发
JavaScript
关键词：
JavaScript CSS
CSS javascript
JavaScript实现
CSS实现
李博 bluemind
目录
相关文章
光明顶阳顶天
|
3月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
69 1
疯狂的猿
|
14天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
85 24
疯狂的猿
|
1月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落，生日蛋糕点亮庆祝动画特效。
疯狂的猿
47 3
我是快乐的嘟嘟
|
2月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响，如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中，需要根据具体情况选择合适的动画技术。
我是快乐的嘟嘟
32 1
kaixin321-44007
|
2月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
kaixin321-44007
38 1
大树营养快线
|
2月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量？
【10月更文挑战第28天】通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
大树营养快线
92 12
八百标兵奔北坡
|
2月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能；Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
八百标兵奔北坡
26 1
温轻舟
|
2月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
172 1
大树营养快线
|
2月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同？
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念，但由于它们所属的语言和应用场景不同，其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
大树营养快线
67 11
蓝易云
|
2月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
55 3

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    IE6, IE7, IE8 CSS 兼容速查表
  • 3
    CSS-选择器7-属性
  • 4
    纯CSS3彩色边线3D立体按钮制作教程
  • 5
    asp.net 多个css文件内容自动放到一个文件中
  • 6
    css学习2
  • 7
    [译] 使用 CSS 的 font-size-adjust 属性改善网页排版
  • 8
    后端码农谈前端（CSS篇）第七课：定位与浮动
  • 9
    好程序员web开发分享CSS3新增属性
  • 10
    12个新潮的 HTML5 & CSS3 网站设计欣赏
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    61
  • 2
    js设计模式-观察者模式与发布/订阅模式
    85
  • 3
    js设计模式-策略模式与代理模式的应用
    81
  • 4
    深入理解JavaScript中的闭包机制
    67
  • 5
    使用Vue.js构建交互式前端的技术探索
    98
  • 6
    使用Node.js构建实时聊天应用的技术指南
    142
  • 7
    深入理解JavaScript中的事件循环机制
    98
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    134
  • 9
    JavaScript 数组方法概览
    44
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    74

    • 相关课程

    更多
  • CSS 快速掌握
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • JavaScript函数
  • JavaScript异步编程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • CSS基础教程
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅