学习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 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
关于element的表单组件整理笔记
Feb 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
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php判断当前操作系统类型
2015/10/28 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python无损压缩图片的示例代码
2020/08/06 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python