Tab标签切换

效果图:

HTML部分:

<div class="wrap">
    <ul id="tag">
      <li class="current" >标签一</li>
      <li>标签二</li>
      <li>标签三</li>
   </ul>
   <div id="tagContent">
      <div> 内容一<br>内容一 </div>
      <div> 内容二<br>内容二 </div>
      <div> 内容三<br>内容三 </div>
   </div>
</div>

  

CSS:

*{margin:0;padding:0;}
 .wrap{width:500pxmargin:10px auto; }
 #tag{ width:498pxoverflow:hiddenbackground:#000border:1px solid #000; }
 #tag li{list-style:nonefloat:leftmargin-right:0pxcolor:whitepadding:5px 20pxcursorpointer;}
 #tag .current{ color:#000background:#ccc; }
 #tagContent div{ width:498pxborder:1px solid #000border-top:noneheight:300pxdisplay:none; }

  
JS部分:

window.onload=function()   //onload 事件句柄,文档装载结束时调用


  var tag=document.getElementById("tag").children; //获取Tag下的li,即Tag标签 
  var content=document.getElementById("tagContent").children; //获取Tag标签对应的内容 
  content[0].style.display = "block"; //默认显示第一个标签的内容 
  var len= tag.length; 
  for(var i=0; i<len; i++)   //无论点击谁都能实现当前显示,其余隐藏
    { 
    tag[i].index=i; //为何如此?(看下面解释) 
    tag[i].onclick = function()     //0级DOM的事件句柄注册

{

for(var n=0; n<len; n++)

{
                  tag[n].className="";
                  content[n].style.display="none"; 
                }   //首先将全部的div隐藏
            tag[this.index].className = "current"; 
            content[this.index].style.display = "block"; 
      } 
   }

}

解释 : 代码涉及了JS的闭包。

闭包:函数能访问定义他们的外部函数的变量和参数(除了this、arguments)。尤其重要的是他们取得的是外部变量的最后一个值! 也就是

tag[i].onclick=function()  { alert(i); //3  }

弹出的都是3,因为3是for循环中 i 最终的值 。 解决办法就是为每个tag[i]添加一个index值,在函数内部通过this.index调用即可与 i 同步

代码同时也涉及this的取值问题.

tag[i].onclick=function() { alert(this); // DOM元素  }

操作DOM事件时(如onclick、onmouseover..)函数中的this指向的是该元素,而不是全局变量或所在对象。

如换成

var a=function(){  alert(this);//window  }

this则指向window对象。

可看出,虽然仅仅是个很简单的Tag标签切换功能,但也能涉及很多JS原理知识。

原文链接:http://blog.csdn.net/wangxiaohui6687/article/details/8523079

JS 实现 Tab标签切换功能的更多相关文章

  1. 很好用的Tab标签切换功能,延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  2. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  3. Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能

    面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...

  4. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  5. Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  6. 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  7. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  8. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

随机推荐

  1. top

    . h或者? 显示帮助画面,给出一些简短的命令总结说明. k 终止一个进程.系统将提示用户输入需要终止的进程PID,以及需要发送给该进程什么样的信号.一般的终止进程可以使用15信号:如果不能正常结束那 ...

  2. python2 到 python3 转换工具 2to3

    windows系统下的使用方法: (1)将python安装包下的Tools/Scripts下面的2to3.py拷贝到需要转换文件目录中. (2)dos切换到需要转换的文件目录下,运行命令2to3.py ...

  3. uva129 - Krypton Factor 7.4.3 困难的串

      7.4.3困难的串 学习点:dfs加入返回值,递归搜索过程中如果有一个成功,就直接退出 //7.4.3 困难的串 #include<cstdio> #include<cstrin ...

  4. python【第二十一篇】Django模板继承、分页、cookie验证

    1.模板继承 母版master.html {% block title %}{% endblock %}2 {% block table-cont %}{% endblock %} 子板 {% ext ...

  5. jsp验证码页面笔记

    首先在网上搜了下jsp生成验证码的代码,如下: package com.servlet; import java.awt.Color; import java.awt.Font; import jav ...

  6. EF异常探究(An entity object cannot be referenced by multiple instances of IEntityChangeTracker.)

    今天在改造以前旧项目时出现了一项BUG,是由于以前不规范的EF写法所导致.异常信息如下: "An entity object cannot be referenced by multiple ...

  7. 初学者必看的文章:在VM12中安装 RedHat RHEL7.2&#160;&#160;系统的详细步骤:看我如何操纵RHEL系统

    一.开始安装 1)新建虚拟机 RHEL7.2 2)成功引导系统--开机出现此画面 Install Red Hat EnterpriseLinux 7.2  安装RHLE7.2 操作系统 Test th ...

  8. js笔记2

    原型:prototype 和 __proto__ prototype 给他即将生成的对象继承下去的属性 prototype: 显式原型,每个function下都有prototype属性,该属性是一个对 ...

  9. RabbitMQ中客户端的Channel类里各方法释义

    // The contents of this file are subject to the Mozilla Public License // Version 1.1 (the "Lic ...

  10. arguments对象的callee属性和caller属性

    js中的arguments对象代表正在执行的函数和调用它的函数的参数.arguments对象有两个属性,callee和caller.collee表示当前正在执行的方法,caller表示调用该方法的对象 ...