利用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闭包的理解
闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法 ...
随机推荐
- linux定时执行
/root/crontab-conf文件为root用户定时执行计划文件 命令:crontab -l 说明:列出定时执行的计划列表 命令:crontab -e 说明:编辑定时执行的计划文件 ...
- 动态分配内存补充 realloc
当再次在原来申请的内存基础上再加内存的时候用realloc,如果第一次分配的内存后面存储地方够用,则连着原来的申请,如果不够用,就重新找到一块够用的地方,然后把原来的复制过去 int main(int ...
- iOS数组、字典与json字符串的转换
/*! * 将字典或者数组转化为JSON串 * * @param theData <#theData description#> * * @return <#return value ...
- UINavigationController 和 UITabBarController
UINavigationController当设置根控制器的时候,意思就是把根控制器压入栈内,当我们push的时候,我们把下一个控制器压入栈内,当我们pop的时候把上面的控制器的内存释放 UITa ...
- 从汇编看c++成员函数指针(三)
前面的从汇编看c++中成员函数指针(一)和从汇编看c++成员函数指针(二)讨论的要么是单一类,要么是普通的多重继承,没有讨论虚拟继承,下面就来看一看,当引入虚拟继承之后,成员函数指针会有什么变化. 下 ...
- 从汇编看c++多重继承中this指针的变化
先来看一下下面的c++源码: #include <iostream> using namespace std; class X { public: virtual void print1( ...
- centos出现磁盘坏掉，怎么修复和检测。
当dmesg的时候,出现下面的信息说明磁盘有问题 Info fld=0x139066d0 end_request: I/O error, dev sda, sector 328230608 Buffe ...
- Razor学习（二）@Html标签
原文链接:http://blog.csdn.net/pasic/article/details/7093802 只是因为原文作者说的东西,还有很多作为基础知识的东西,我都没有掌握,所以总结在这里,蓝字 ...
- 微软云基础架构Hyper-scale Datacenter
每天醒来,可能很多人的习惯都是打开手机,看看微信,刷刷朋友圈,或者看看新闻,去咖啡店,打开电脑搜索一些关键字,观看视频,电视剧--可是你有没有想过你每一次键盘的敲击,每一次微信的语音的发送,数据会流向 ...
- android关于window
http://mobile.51cto.com/android-259922_all.htm http://mobile.51cto.com/android-259922.htm http://mob ...