利用js闭包获取索引号
以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>
利用js闭包获取索引号的更多相关文章
- Titanium系列－－利用js动态获取当前时间
动态获取时间: //显示时间 function getDateTime() { var now = new Date(); var year = now.getFullYear(); var mont ...
- Gridview、DataList、Repeater获取行索引号
Gridview.DataList.Repeater如何获取行索引号?很多情况下都会用得到,下面贴出代码,注意行索引号是从0开始,不是从1开始,如果要从1开始,请在代码里面+1就行了. Gridvie ...
- 利用JS获取地址栏的中文参数
地址栏中为:localhost:22865/ZYHSYY.aspx?BQH=305&DoctorName=张三&DoctorId=100我想利用JS获取到“张三”,请问该如何写js?目 ...
- 一篇文章看懂JS闭包，都要2020年了，你怎么能还不懂闭包？
壹 ❀ 引 我觉得每一位JavaScript工作者都无法避免与闭包打交道,就算在实际开发中不使用但面试中被问及也是常态了.就我而言对于闭包的理解仅止步于一些概念,看到相关代码我知道这是个闭包,但闭包 ...
- 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- js中获取URL中指定的查询字符串
js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...
- 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作
HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...
- 个人对js闭包的理解
闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法 ...
随机推荐
- CALayer CABasicAnimation
CALayer是UIView可以响应事件.一般来说,layer可以有两种用途:一是对view相关属性的设置,包括圆角.阴影.边框等参数:二是实现对view的动画操控. 因此对一个view进行core ...
- D - Specialized Four-Digit Numbers
Description Find and list all four-digit numbers in decimal notation that have the property that the ...
- sqlplus 链接数据库
实验目的:在虚拟机中用sqlplus工具访问真实机的数据库: 实验环境: 真实机(windows系统,数据库服务名 orcl): SQL> select * from v$version; BA ...
- 复习篇（一）Activity的生命周期和启动模式
(一)关于<intent-filter>中的<data> 当设置<data>过滤器的时候,使用intent的时候必须要设置响应的匹配,否则无法匹配成功.不过不设置则 ...
- Android的线程和线程池
---恢复内容开始--- 一.Android线程的形态 (一)AsyncTask解析 AysncTask简介:①.实现上封装了Thread和Handler ②.不适合进行特别耗时的后台任务 Ays ...
- codeforces 519C.. A and B and Team Training
C. A and B and Team Training time limit per test 1 second memory limit per test 256 megabytes input ...
- MVC WebApi 用户验证 (2)
构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(66)-MVC WebApi 用户验证 (2) 前言: 构建ASP.NET MVC5+EF6+E ...
- create custom launcher icon 细节介绍
create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...
- Java与C#间json日期格式互转完美解决方案
http://blog.csdn.net/wilsonke/article/details/24362851 作用一种简单方便的数据传输方案,JSON已经成为替代XML的事实标准.然而在JSON中 ...
- Oracle前10条记录
在Oracle怎样查询表中的top10条记录呢? select * from test where rownum <=10 下面是关于rownum的介绍 ==================== ...