学习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 相关文章推荐
jquery 删除cookie失效的解决方法
Nov 12 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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
使用 php4 加速 web 传输
2006/10/09 PHP
一些常用的php函数
2006/12/06 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python 如何将office文件转换为PDF
2020/09/22 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
爱情保证书范文
2014/02/01 职场文书
促销活动计划书
2014/05/02 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
无罪辩护词范文
2015/05/21 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js