学习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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
学习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
用PHP动态创建Flash动画
2006/10/09 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
node.js 中国天气预报 简单实现
2016/06/06 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Django框架 信号调度原理解析
2019/09/04 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
初中英语教学反思
2014/01/25 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
求职面试个人自我评价
2014/02/28 职场文书
创业女性典型材料
2014/05/02 职场文书
消防标语大全
2014/06/07 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
初中同学会致辞
2015/08/01 职场文书
体育教师研修感悟
2015/11/18 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers