学习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 ajax 简单范例(界面+后台)
Nov 19 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
我的论坛源代码(九)
2006/10/09 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php实现数据库的增删改查
2017/02/26 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Vue文件配置全局变量的实例
2018/09/06 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
解决python 输出是省略号的问题
2018/04/19 Python
Python实现快速排序的方法详解
2019/10/25 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
团日活动总结书
2014/05/08 职场文书
爱护公共设施的标语
2014/06/24 职场文书
学校社会实践活动总结
2014/07/03 职场文书
经理助理岗位职责
2015/02/02 职场文书
城管年度个人总结
2015/02/28 职场文书