面向对象的tab选项卡实现

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

效果截图：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>面向对象的tab选项卡实现</title><link rel="stylesheet" href="tab.css">
</head>
<body><div class="box" id="box"><ul class="conList"><li class="conli on">第一张选项卡</li><li class="conli">第二张选项卡</li><li class="conli">第三张选项卡</li></ul><nav class="btnList"><a class="btn on" href="javascript:;">第一个控制按钮</a><a class="btn" href="javascript:;">第二个控制按钮</a><a class="btn" href="javascript:;">第三个控制按钮</a></nav>    </div><script src="tab.js"></script>
</body>
</html>

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;

　　for(var i = 0; i<this.totalNum; i++){　　　　　//方法一// 设置索引this.btns[i].index = i;// 每个按钮点击事件this.btns[i].onclick = function(){_this.curIndex = this.index;_this.toSwitch();}　　　　 //方法二：利用闭包        // this.btns[i].onclick = (function(i){        //     return function(){                        //         _this.curIndex = i;        //         _this.toSwitch();        //     }        // })(i)}
}
TabSwitch.prototype.toSwitch = function(){//把所有的控制区域on样式清空for(var i = 0; i<this.totalNum; i++){this.btns[i].className = 'btn';this.liList[i].className = 'conli';}// 为当前点击按钮设置样式this.btns[this.curIndex].className += ' on';// 为当前按钮对应选项设置样式this.liList[this.curIndex].className += ' on';
}
// 实例
var oBox = document.getElementById('box');
var tab01 = new TabSwitch(oBox);

参考：http://www.cnblogs.com/xiaohuochai/p/4803964.html

转载于:https://www.cnblogs.com/lvmylife/p/5484657.html

面向对象的tab选项卡实现相关推荐

1~22（面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换）
1 面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...
用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
layui tab选项卡外部html页面,layui的Tab选项卡知识
layui的公共类: lay-filter=" " 事件过滤器.你可能会在很多地方看到他,他一般是用于监听特定的自定义事件.你可以把它看作是一个ID选择器 layui的公共属性: ...
html tab选项卡控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
ViewPager+Fragment实现TabHost，Fragment动态添加、删除，Tab选项卡跟随滑动
效果图: 代码功能: (1)用ViewPager+Fragment实现TabHost,ViewPager的每一个Page均是Fragment.ViewPager中的Fragment可以动态添加.删除. ...
漂亮的jQuery tab选项卡插件
清远大学城网(http://www.qydxc.com) tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项 ...

面向对象的tab选项卡实现

面向对象的tab选项卡实现相关推荐

最新文章

热门文章