javascript代码(常规方式/面向过程):

<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1'); //获取外部div
var aLis=oDiv1.getElementsByTagName('li'); //通过外部div获取li切换标签
var aDivs=oDiv1.getElementsByTagName('div'); //通过外部div获取tab标签对应的div内容 for(var i=0; i<aLis.length;i++){
aLis[i].index=i; //为li切换标签添加一个自定义index属性
aLis[i].onmouseover=function(){
for(var j=0; j<aLis.length;j++){ //初始化所有li及内部div样式
aLis[j].className=' ';
aDivs[j].style.display='none';
}
this.className='currentLi'; //为当前li添加currentLis样式
aDivs[this.index].style.display='block'; //让当前li所对应的div显示
}
}
}
</script>

javascript代码(面向对象方式):

   window.onload=function(){
new tabSwitch('div1');
}
var aLis=null;
var aDivs=null;
function tabSwitch(id){
var _this=this;
var oDiv1=document.getElementById(id);
this.aLis=oDiv1.getElementsByTagName('li');
this.aDivs=oDiv1.getElementsByTagName('div'); for(var i=0; i<this.aLis.length;i++){
this.aLis[i].index=i;
this.aLis[i].onmouseover=function(){
_this.tabs(this); //通过_this指向div1而不是当前的aLis[i]对象,这里面的this指向的是aLis[i]对象
}
}
}
tabSwitch.prototype.tabs=function(oLi){
for(var j=0; j<this.aLis.length;j++){
this.aLis[j].className='';
this.aDivs[j].style.display='none';
}
oLi.className='currentLi';
this.aDivs[oLi.index].style.display='block';
}

简易HTML代码:

<div id="div1">
<ul>
<li class="currentLi">tabs01</li>
<li>tabs02</li>
<li>tabs03</li>
<li>tabs04</li>
<li>tabs05</li>
</ul>
<div style="display:block;">tabs01对应内容</div>
<div>tabs02对应内容tabs02对应内容</div>
<div>tabs03对应内容tabs03对应内容tabs03对应内容</div>
<div>tabs04对应内容tabs04对应内容tabs04对应内容tabs04对应内容</div>
<div>tabs05对应内容tabs05对应内容tabs05对应内容tabs05对应内容tabs05对应内容</div>
</div>

简易css代码:

*{ margin:0; padding:0;}
#div1{ margin-top:60px; margin-left:60px;}
#div1 ul{ list-style:none;}
#div1 ul li{ border-bottom:solid 1px #dcdcdc; float:left; margin-right:15px; display:block; height:30px; line-height:30px; text-align:center; padding:5px 10px; background-color:#f6f6f6; cursor:pointer;}
.currentLi{ background-color:#dcdcdc!important;}
#div1 div{ width:360px; background-color:#f6f6f6; height:100px; padding: 60px 20px;display:none;}

  

精通javascript笔记(智能社)——简易tab选项卡及应用面向对象方法实现的更多相关文章

  1. 精通javascript笔记(智能社)——数字时钟

    JS代码: <script type="text/javascript">    window.onload=function(){ //小于10的数字补零及数字转字符 ...

  2. [Effective JavaScript 笔记]第34条:在原型中存储方法

    js中完全有可能不借助原型进行编程.不用在其原型中定义任何的方法. 创建对象 构造函数法 所有属性和方法都在构造函数中定义 function User(name,pwd){ this.name=nam ...

  3. javascript笔记07:使用Object类为实例定义方法和属性

    function Person() {} Person.prototype = { nickName:"john", , showInfo:function() { return ...

  4. <精通JavaScript>---阅读笔记01

    下面是阅读精通JavaScript书做的相关笔记. JS中的函数重载 函数重载必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力,在js中每个函数都带有一个仅在这个函数范围内作用的变量, ...

  5. JavaScript学习--(智能社视频)

    JavaScript学习,这是智能社官网上的JS视频,讲解的挺不错的,就是没有视频的demo,在视频中附上自己编写的一些demo... 下载地址:http://pan.baidu.com/s/1cPz ...

  6. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  7. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  8. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  9. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. HBase 高级架构解析

    整体框架 使用 ZooKeeper 框架协助 RegionServer(类似于HDFS的nodemanager)用户请求从 Client 到 Zookeeper 进行判断数据属于哪一个 Region ...

  2. 实用脚本 2 -- Linux下定时执行脚本

    今天学习Linux下定时执行脚本,看到一篇讲解比较好的文章,特此拿来分享. 原文链接:http://www.blogjava.net/decode360/archive/2009/09/18/2877 ...

  3. anaconda虚拟环境操作

    1.首先在所在系统中安装Anaconda.可以打开命令行输入conda -V检验是否安装以及当前conda的版本. 2.conda常用的命令. 1)conda list 查看安装了哪些包. 2)con ...

  4. CSS里一个奇怪的属性

    事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...

  5. [转]struct2 拦截所有没有登录的用户,强行转到登录界面AuthorizationInterceptor

    package com.sise.action;   import java.util.Map;   import com.opensymphony.xwork2.Action; import com ...

  6. C#3DES加密了解一下

    最近一个项目中,因为服务端是用的java开发的,客户端是用的C#,由于通信部分采用到了3DES加密,所以做个记录,以备以后需要的时候直接用. 这是对方(java)的加密算法,和网上流传的代码也差不多( ...

  7. Qt Qwdget 汽车仪表知识点拆解5 标题栏图标闪烁

    先贴上效果图,注意,没有写逻辑,都是乱动的 看下最上面的部分,有一些仪表图标在闪烁,如果一个一个写,也是可以实现的,不过感觉要累死的节奏 这里我写了一个我自己的Label,完了把把这些QLabel提升 ...

  8. (转) Unreal Engine 4 Custom Shaders Tutorial

    说明: 1.这里的Custom Shaders 为且仅为 Custom Node的使用和USF的包含.并非全局Shader和Material Shader. 2.原文来源:https://www.ra ...

  9. Daily Scrum 11.01

    全队进展速度很快,11月伊始都完成了初步的工作.交由负责整合工作的毛宇开始调试整合. Member Today's task  Tomorrow's task 李孟 task 616 测试 (活动) ...

  10. [转]Hexo博客添加访问统计 - 记录

    引入不蒜子 <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"> ...