学习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的网页SELECT下拉框美化代码
Oct 28 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
原生JavaScript实现换肤
Feb 19 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 的 __FILE__ 常量
2007/01/15 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
input的focus方法使用
2010/03/13 Javascript
Dojo 学习要点
2010/09/03 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
浅谈React碰到v-if
2018/11/04 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python Celery多队列配置代码实例
2019/11/22 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
pandas apply多线程实现代码
2020/08/17 Python
python Gabor滤波器讲解
2020/10/26 Python
python空元组在all中返回结果详解
2020/12/15 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
.net软件工程师面试题
2015/03/31 面试题
大学生党课思想汇报
2013/12/29 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
发展党员工作情况汇报
2014/10/28 职场文书