学习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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python中pip的安装与使用教程
2018/08/10 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
文言文形式的学生求职信
2013/12/03 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
趵突泉导游词
2015/02/03 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
详解python的异常捕获
2022/03/03 Python
基于Python实现股票收益率分析
2022/04/02 Python