以tab选项卡效果为例：

网页中的选项卡效果aaarticlea/png;base64,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" alt="" />
如图。
在鼠标点击规则标题的时候下面内容就会切换成规则的内容，这就是一个选项卡切换效果了。
标题和其内容是一一对应的。
在点击的时候就需要得到当前点击的索引号，用jquery的话可以直接通过.index()获取当时元素的索引值，那么用js呢？下面我们来利用js的闭包来实现获取索引。

页面代码如下：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <style>

         #box{width:255px;height:20px;list-style: none;}

         #box li{float:left;line-height: 20px;width:49px;border:1px #000 solid;text-align: center;cursor: pointer;}

     </style>

     <ul id="box">

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

     </ul>

     <script>

         var box = document.getElementById('box'),

         liTag = box.getElementsByTagName('li'),

         length = liTag.length,

         i = 0;

         for(;i<length;i++){

             liTag[i].onclick = (function(i){

                 return function(){

                     alert(i);

                 }

             })(i);

         }

     </script>

 </body>

 </html>
在onclick事件执行一个(function(){})()的闭包操作，把每次点击的i传进去这样就能保存起来，从而得到当前的索引值，索引得到了，那选项卡实现起来就简单了对吧。

利用js闭包获取索引号的更多相关文章

  1. Titanium系列－－利用js动态获取当前时间

    动态获取时间: //显示时间 function getDateTime() { var now = new Date(); var year = now.getFullYear(); var mont ...

  2. Gridview、DataList、Repeater获取行索引号

    Gridview.DataList.Repeater如何获取行索引号?很多情况下都会用得到,下面贴出代码,注意行索引号是从0开始,不是从1开始,如果要从1开始,请在代码里面+1就行了. Gridvie ...

  3. 利用JS获取地址栏的中文参数

    地址栏中为:localhost:22865/ZYHSYY.aspx?BQH=305&DoctorName=张三&DoctorId=100我想利用JS获取到“张三”,请问该如何写js?目 ...

  4. 一篇文章看懂JS闭包，都要2020年了，你怎么能还不懂闭包？

     壹 ❀ 引 我觉得每一位JavaScript工作者都无法避免与闭包打交道,就算在实际开发中不使用但面试中被问及也是常态了.就我而言对于闭包的理解仅止步于一些概念,看到相关代码我知道这是个闭包,但闭包 ...

  5. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  6. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  7. js中获取URL中指定的查询字符串

    js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...

  8. 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

  9. 个人对js闭包的理解

      闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法 ...

随机推荐

  1. mapkit定位以及俯视视图

    1.导入框架MapKit.framework,CoreGraphics.framework

  2. eclipse ldt update resource

    http://download.eclipse.org/ldt/releases/milestones/ 百度一下都说是 http://download.eclipse.org/koneki/upda ...

  3. 使用ICE进程间通信时，IP和端口的选择

    使用ICE进程间通信时,IP和端口的选择 服务器在创建时使用的Endpint格式为 tcp  -h IP地址 -p 端口 1.IP地址的选择 如果填某个网卡的地址,则只在这个地址上监听,客户端必须连这 ...

  4. LFS，编译自己的Linux系统 - 前言

    近期工作计划:1. 上班时,用Django编写一个网站:2. 下班时,用C#.WPF编写一个单机版应用软件:3. 其他时间,根据LFS编译自己的Linux系统. LFS是一本书,书中列出了从零开始编译 ...

  5. 计算两点间的距离-hdu2001

    Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离.   Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1,y1,x2,y2 ...

  6. VS调试时监视上一个错误代码和错误的文本描述

    以前我都是用GetLastError()然后在MSDN里面查错误原因的.现在才知道有很简便的方法: 在Watch窗口选择一行,然后输入$err,hr

  7. Windows消息拦截技术的应用（作者博客里有许多相关文章）

    民航合肥空管中心 周毅 一.前 言 众所周知,Windows程式的运行是依靠发生的事件来驱动.换句话说,程式不断等待一个消息的发生,然后对这个消息的类型进行判断,再做适当的处理.处理完此次消息后又回到 ...

  8. 一张图片入门Python

    一张图片入门Python 之前已有别人整理了,一张图入门Python,快速了解各种基本的语法. 英文版: 图 5.1. Quick Python Script Explanation 中文版: 图 5 ...

  9. JIRA官方：JIRA报表与分析

    访问重要的问题 JIRA系统内置的过滤器可以使你快速访问最重要的问题.通过保存和收藏自定义的过滤器,你可以随时了解项目和团队的优先级. 保持团队同步 创建一个过滤器,可以保存你的任何搜索条件.通过分享 ...

  10. Eclipse Velocity插件安装

    打开eclipse安装velocity插件,这里有两种eclipse velocity的安装 方式一:不推荐的安装(安装会失败) Help>install new software>add ...