学习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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
js类型检查实现代码
Oct 29 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
详解JS函数防抖
Jun 05 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
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
Underscore源码分析
2015/12/30 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python教程之全局变量用法
2016/06/27 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
公益活动策划方案
2014/01/09 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
党员年终个人总结
2015/02/14 职场文书