学习javascript面向对象 实例讲解面向对象选项卡


Posted in Javascript onJanuary 04, 2016

本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下

效果图:

学习javascript面向对象 实例讲解面向对象选项卡

1、功能说明

点击三个按钮分别显示对应的选项卡
2、html代码说明

<div class="box" id="box">
 <ul class="list">
  <li class="in_active">第一张选项卡</li>
  <li class="in">第二张选项卡</li>
  <li class="in">第三张选项卡</li>
 </ul>
 <nav class="conList">
  <a class="con_active" href="javascript:;">第一个控制按钮</a>
  <a class="con" href="javascript:;">第二个控制按钮</a>
  <a class="con" href="javascript:;">第三个控制按钮</a>
 </nav> 
</div>

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('nav')[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('box');
//构造选项卡对象
var tab1 = new Tab(oBox);

希望本文所述对大家学习javascript面向对象有所帮助。

Javascript 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
深入了解JavaScript 私有化
May 30 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 #Javascript
jQuery自动完成插件completer附源码下载
Jan 04 #Javascript
学习javascript面向对象 理解javascript对象
Jan 04 #Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 #Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 #Javascript
javascript基础语法学习笔记
Jan 04 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
为python设置socket代理的方法
2015/01/14 Python
python将文本转换成图片输出的方法
2015/04/28 Python
python调用API实现智能回复机器人
2018/04/10 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
快餐店的创业计划书范文
2014/01/29 职场文书
烹饪自我鉴定
2014/03/01 职场文书
大学生毕业求职信
2014/06/12 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
创业计划书之面包店
2019/09/12 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL