javascript面向对象——tabs实例
面向过程—>面向对象
之前在未学习面向对象时,我们都是面向过程编程的。它的优点就是简单,明了,下面就来把面向过程的tabs切换改写成面向对象的方式。
html:
<div class="tabs" id="tabs1"> <ul class="tabs-nav"> <li class="active"><a href="javascript:;">折扣</a></li> <li><a href="javascript:;">活动</a></li> <li><a href="javascript:;">优惠</a></li> <li><a href="javascript:;">其他</a></li> </ul> <div class="tabs-cnt"> <div class="tabs-content"> 11111111 </div> <div class="tabs-content"> 2222 </div> <div class="tabs-content"> 3333 </div> <div class="tabs-content"> 4444 </div> </div> </div>
css:
;; list-style:none;} .tabs{ margin:10px;} .tabs-nav:before, .tabs-nav:after{ display:table; content:' ';} .tabs-nav:after{ width:100%; clear:both; border-bottom:1px solid #47a3da;} .tabs-nav li{ position:relative; float:left; margin-right:5px; border:1px solid #becbd2; border-bottom:none;} .tabs-nav li.active:after{ position:absolute; bottom:-1px; width:100%; display:block; content:' '; border-bottom:1px solid #fff;} .tabs-nav a{ display:block; padding:0 20px; line-height:30px; text-decoration:none; color:#000; font-size:14px;} .tabs-cnt{ padding:10px;} .tabs-content{ display:none;} .tabs-content:first-child{ display:block;}
javascript:
window.onload=function(){ var oTabs=document.getElementById('tabs1'); var aTabsNav=oTabs.querySelectorAll('.tabs-nav li'); var aTabsCnt=oTabs.querySelectorAll('.tabs-content'); for(var i=0;i<aTabsNav.length;i++){ aTabsNav[i].index=i; aTabsNav[i].onclick=function(){ for(var i=0;i<aTabsNav.length;i++){ aTabsNav[i].className=''; aTabsCnt[i].style.display='none'; } this.className='active'; aTabsCnt[this.index].style.display='block'; }; } };
效果:
改写成面向对象:
需要注意的几点:1.不能有函数嵌套 2.变量改为属性 3.函数改为方法 4.this的指向问题
function tabSwitch(id){ var _this=this; this.oTabs=document.getElementById(id); this.aTabsNav=this.oTabs.querySelectorAll('.tabs-nav li'); this.aTabsCnt=this.oTabs.querySelectorAll('.tabs-content'); for(var i=0;i<this.aTabsNav.length;i++){ this.aTabsNav[i].index=i; this.aTabsNav[i].onclick=function(){ _this.tab(this); }; } } tabSwitch.prototype.tab=function(oTabsNav){ for(var i=0;i<this.aTabsNav.length;i++){ this.aTabsNav[i].className=''; this.aTabsCnt[i].style.display='none'; } oTabsNav.className='active'; this.aTabsCnt[oTabsNav.index].style.display='block'; }; new tabSwitch('tabs1');
javascript面向对象——tabs实例的更多相关文章
- javaScript 面向对象开发实例
javaScript 面向对象开发实例 这个是结合require的模块化开发,首先创建构造函数: //test.js 1 function Test(lists) { var config={ nam ...
- JavaScript面向对象 实例与原型
JavaScript 面向对象 和 C# 不太一样,js 的对象是继承自原型的如下: 首先创建一个 js 实例 new function function f () {} 这个函数 会继承 Func ...
- JavaScript学习总结(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- javascript面向对象系列第一篇——构造函数和原型对象
× 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...
- Javascript面向对象(封装、继承)
Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...
- 【转】javascript面向对象编程
摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...
- javascript面向对象(一):封装
本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...
随机推荐
- JSP——页面三大部分(指令、脚本、动作组件)
一.JSP简介: JSP(Java Server Pages,Java服务器端页面开发技术) JSP可以实现的技术都可以通过Servlet实现,他们本质上是一样的.但JSP设计的目的在于简化表示层的表 ...
- 解决eclipse中maven出现的Failure to transfer XXX.jar的问题
这个问题很烦,试了好几次都没有彻底解决,今天终于找到解决办法了. 问题主要出在,maven在下载jar的过程中出现了中断或者错误问题(不仅仅是eclipse,其他IDE也一样) 解决办法: 移除之前的 ...
- grunt切换下载源
nrm 是一个 NPM 源管理器,允许你快速地在NPM 源间切换: 安装:npm install -g nrm 列出可选源:nrm ls 切换:nrm use taobao 测试所有源连接时间:nrm ...
- 射频识别技术漫谈(25)——Felica简介
Felica是SONY公司开发的射频识别技术,该技术使用的载波频率与ISO14443A和ISO14443B一样,都是13.56MHz,所以有人把它称为ISO14443C,但SONY并没有正式接受这样的 ...
- VS2012 EF5 连接oracle11.2
1.安装ODAC 11.2 Release 5 and Oracle Developer Tools for Visual Studio (11.2.0.3.20). 注:支持VS2010和VS201 ...
- elasticsearch集群部署
启动elk: zjtest7-redis:/usr/local/elasticsearch-2.3.4/bin# ./elasticsearch -d 后台运行 访问: http://192.168. ...
- Filter 知识总结
Filter对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限访问控制.过滤敏感词汇.压 ...
- c++ cout 保留小数点位
需要头文件 <iomanip> 输出时需要用 fixed 和 setprecision() fixed代表输出浮点数,setprecision()设置精度. #include <io ...
- 未能加载文件或程序集“DAL”或其他的某一个依赖项,系统找不到指定的文件
针对这个问题我在敲VB.NET机房收费系统的时候总共出现了两次,第一次是在使用反射+抽象工厂的时候出现的,第二次是在使用VS2012自带的打包工具生成可执行文件执行exe文件的时候出现的.具体看下图: ...
- SqlServer之like、charindex、patindex(转载)
SqlServer之like.charindex.patindex 1.环境介绍 测试环境 SQL2005 测试数据 200W条 2.环境准备 2.1建表 CREATE TABLE [dbo] ...