面向对象的tab选项卡实现-白红宇

面向对象的tab选项卡实现

阅读量：5982 次

发布时间：2019-06-20

本文共 1381 字，大约阅读时间需要 4 分钟。

利用最基础的面向对象的思想，实现tab选项卡效果：

效果截图：

HTML代码：

    
         面向对象的tab选项卡实现    
         
             
                  
       第一张选项卡
            
       第二张选项卡
            
       第三张选项卡
        
      
        
                  
       第一个控制按钮            
       第二个控制按钮            
       第三个控制按钮

CSS代码(tab.css)：

*{
    margin: 0; padding: 0 }/*in为选项卡普通状态，默认不显示*/.conList .conli{
       display: none;    width: 600px;    height: 100px;    background: orange;    font-size: 50px;    line-height: 100px;    text-align: center;}.conList .on{
       display: block;}/*控制按钮区域*/.btnList{
       margin-top: 6px;}/*btn为按钮普通状态，默认文字颜色为黑色*/.btnList .btn{
       display: inline-block;    color: black;    background-color: orange;    padding: 6px;    text-decoration:none;}.btnList .on{
       background-color: #7a4201;    color: #fff;}/*btn_active为按钮选中状态，选中后文字颜色为白色*/.btn_active{
       color: white;    }

JS代码(tab.js)：

// 定义构造函数var TabSwitch = function(parent){    // 获取内容区域    this.ulList = parent.getElementsByTagName('ul')[0];    this.liList = this.ulList.getElementsByTagName('li');    //获取控制按钮    this.btnList = parent.getElementsByTagName('nav')[0];    this.btns = this.btnList.getElementsByTagName('a');    // 添加事件    this.totalNum = this.btns.length; this.curIndex = 0; var _this = this;