利用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闭包的理解
闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法 ...
随机推荐
- 基于.Net的单点登录(SSO)解决方案
前些天一位朋友要我帮忙做一单点登录,其实这个概念早已耳熟能详,但实际应用很少,难得最近轻闲,于是决定通过本文来详细描述一个SSO解决方案,希望对大家有所帮助.SSO的解决方案很多,但搜索结果令人大失所 ...
- centos添加sudoers
CentOS添加sudoers 1.chmod 740 /etc/sudoers 2. ## Allow root to run any commands anywhere root A ...
- iOS 将系统文字设置为中文
在.info文件中添加 Localization native development region 键值 string Value值:en
- Java三大特征之多态(三)
面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...
- 使用ThinkPHP开发中MySQL性能优化的最佳21条经验
使用ThinkPHP开发中MySQL性能优化的最佳21条经验讲解,目前,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更 ...
- Nginx 变量漫谈（六）
Nginx 内建变量用在“子请求”的上下文中时,其行为也会变得有些微妙. 前面在 (三) 中我们已经知道,许多内建变量都不是简单的“存放值的容器”,它们一般会通过注册“存取处理程序”来表现得与众不同, ...
- nginx上传模块—nginx upload module-
一. nginx upload module原理 官方文档: http://www.grid.net.ru/nginx/upload.en.html Nginx upload module通过ngin ...
- Qt 鼠标样式特效探索样例（一）——利用时间器调用QWidget.move()函数
Qt 鼠标样式特效探索样例(一) 心血来潮,突然想在Qt里玩一把鼠标样式,想到在浏览网页时,经常看到漂亮的鼠标动画,于是今天摸索着乱写个粗糙的demo,来满足自己的好奇心. 效果图 方案要 ...
- Delphi 技巧改造HINT的输出方式
Delphi中使用提示是如此简单,只需将欲使用Hint的控件作如下设置: ShowHint := True; Hint := ‘提示信息’; 不必写一行代码,相当方便. 但有时我们又想自己定制提示的效 ...
- linux之SQL语句简明教程---函数
既然数据库中有许多资料都是已数字的型态存在,一个很重要的用途就是要能够对这些数字做一些运算,例如将它们总合起来,或是找出它们的平均值.SQL 有提供一些这一类的函数.它们是: AVG (平均) COU ...