web前端|js教程
javascript,面向对象,选项卡
web前端-js教程
本文实例讲解了最简单的面向对象选项卡实现方法，分享给大家供大家参考，具体内容如下
内存池源码,vscode更改相对路径,samba配置ubuntu,tomcat 负载调优,数据爬虫图片,php去掉所有html,越秀区seo问答推广外包lzw
效果图：
笑话源码,怎么找到ubuntu分区,requests爬虫异常处理,php script,狗哥SEOlzw
php三级分销商城系统源码,ubuntu怎么配置驱动,新思维爬虫馆,上手php,宁波免费seolzw
1、功能说明
点击三个按钮分别显示对应的选项卡
2、html代码说明
第一张选项卡 第二张选项卡 第三张选项卡
3、css重点代码说明
/*in为选项卡普通状态，默认不显示*/.in,.in_active{ display: none; width: 600px; height: 100px; background: orange; font-size: 50px; line-height: 100px; text-align: center;}/*in_active为选项卡选中状态，选中后显示*/.in_active{ display: block;}/*con为按钮普通状态，默认文字颜色为黑色*/.con,.con_active{ color: black; background-color: orange;}/*con_active为按钮选中状态，选中后文字颜色为白色*/.con_active{ color: white; }
4、js代码说明
function Tab(obj){ /*元素获取*/ //获取选项卡展示部分 this.oList = obj.getElementsByTagName(ul)[0]; this.aIn = this.oList.getElementsByTagName(li); //获取选项卡控制部分 this.oConList = obj.getElementsByTagName( av)[0]; this.aCon = this.oConList.getElementsByTagName(a); /*变量设置*/ //选项卡张数 this.count = this.aIn.length; //当前第几张 this.cur = 0; var _this = this; for(var i = 0; i < this.count; i++){ //设置索引 this.aCon[i].index = i; //给按钮添加事件 this.aCon[i].onclick = function(){ _this.cur = this.index; _this.switch(); } }}Tab.prototype.switch = function(){ //去掉所有 for(var i = 0; i < this.count; i++){ this.aIn[i].className = in; this.aCon[i].className = con; } //显示当前 this.aIn[this.cur].className = in_active; this.aCon[this.cur].className = con_active; }//获取选项卡元素var oBox = document.getElementById(ox);//构造选项卡对象var tab1 = new Tab(oBox);
如果觉得《学习javascript面向对象 实例讲解面向对象选项卡【javascript】》对你有帮助，请点赞、收藏，并留下你的观点哦！
