学习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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js计算页面刷新的次数
Jul 20 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Python开发编码规范
2006/09/08 Python
Python 命令行参数sys.argv
2008/09/06 Python
python django集成cas验证系统
2014/07/14 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
主治医师岗位职责
2013/12/10 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
伊索寓言教学反思
2014/05/01 职场文书
公司建议书怎么写
2014/05/15 职场文书
小学课外阅读总结
2014/07/09 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
早恋主题班会
2015/08/14 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书