利用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闭包的理解
闭包算是前端面试的基础题,但我看了很多关于闭包的文章博客,但感觉很多对于闭包的理想还是有分歧的,现在网上对闭包的理解一般是两种: 有些文章认为闭包必须要返回嵌套函数中里面用到外面函数局部变量的方法 ...
随机推荐
- sql server数据库主键自增一插入特定值
ID identity(1,1) SET IDENTITY_INSERT TableName ON INSERT TableName(ID) VALUES(110) SET IDENTITY_INSE ...
- FTP下文件夹权限的设置755，766，777，644代表什么意思
一般情况下,为了网站更安全,我们需要给文件或文件夹设置权限,在采用FTP登录的方式下,经常会用到755,766,777,644等设置. 具体这些数字都代表什么意思呢? 这三个数字分别表示:不同用户或用 ...
- App_Code
App_Code,文件夹是·NET平台下.在创建网站时,系统为类自动放的位置.它位于Web应用程序根目录下,其存储所有应当作为应用程序的一部分动态编译的类文件.这些类文件自 动链接到应用程序,而不需要 ...
- 如何：对 Web 窗体使用路由
配置用于路由的 ASP.NET 网站项目 1. 在应用程序的 Web.config 文件中,将 ASP.NET 路由程序集添加到 assemblies 元素,如下面的示例所示: <add ass ...
- 打开本地STL文件并创建webgl使用的geometry
需求 打开本地STL文件 一个独立基于webgl的viewer,会被别的网站重用 将打开文件的数据传输给viewer,并且在文件加载的时候显示进度条 解决方案 #1可以使用传统的html5 api来打 ...
- openGL 初试 绘制三角形 和添加鼠标键盘事件
code: #include <gl/glut.h> #include <stdlib.h> void render(void); void keyboard(unsigned ...
- 常用的IO流
常用的IO流 •根据处理数据类型的不同分为:字节流和字符流 •根据数据流向不同分为:输入流和输出流 字节流:字节流以字节(8bit)为单位,能处理所有类型的数据(如图片.avi等). 字节输入流:In ...
- OSCHina技术导向：开源企业ERP系统Opentaps
opentaps Open Source ERP + CRM 基于 Apache OFBiz (The Open For Business Project ) 构建, 是一款设计良好, 逐渐流行起来的 ...
- 顶尖数据挖掘开发平台（TipDM-D2）产品白皮书
顶尖数据挖掘开发平台 (TipDM-D2) 产 品 白 皮 书 广州泰迪智能科技有限公司 版权所有 地址: 广州市经济技术开发区科学城232号 网址: http ...
- linux之SQL语句简明教程---INSERT INTO
到目前为止,我们学到了将如何把资料由表格中取出.但是这些资料是如果进入这些表格的呢? 这就是这一页 (INSERT INTO) 和下一页 (UPDATE) 要讨论的. 基本上,我们有两种作法可以将资料 ...