例如:要做到这样的效果

点击每个选项时,会显示不同的div。

我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过程。

下面的例子就是:

首先,把妙味课堂、妙味茶馆、苗味视频选项的div设置为display:none;

然后,早在之前就以前设置好了数组的索引值

 btn[i].index=i;    于是当所有div都设置为display:none后,再把点击的那个div的display设置为block就可以了
 contain[this.index].style.display="block";

 window.onload=function(){
var main=document.getElementById("main");
var btn=document.getElementsByTagName("li");
var contain=getByClass(main, "contain");
var i=0;
contain[0].style.display='block';
for (i=0;i<btn.length;i++){
btn[i].index=i; //索引值
btn[i].onclick=function(){
for(i=0;i<btn.length;i++){ btn[i].className="";
contain[i].style.display='none';
}
contain[this.index].style.display="block"; //利用this对象,表示当前所点击的对象,再利用我们设置好的索引值,实现了当前点击对象的display:block
}; } };

(一)javascript中的数组index属性——获取数组的索引值的更多相关文章

  1. JavaScript 数组 length 属性获取数组长度或设置数组元素的数目

    JavaScript 数组 length 属性 JavaScript 数组 length 属性可返回或设置或组中元素的数目,语法如下: array_object.length 利用 length 属性 ...

  2. JavaScript中的可枚举属性与不可枚举属性

    在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的.可枚举性决定了这个属性能否被for…in查找遍历到. 一.怎么判断属性是否可枚举 js中基本包 ...

  3. JavaScript中的方法和属性

    书读百遍其义自见 学习<JavaScript设计模式>一书时,前两个章节中的讲解的JavaScript基础知识,让我对属性和方法有了清晰的认识.如下是我的心得体会以及部分摘录的代码. 不同 ...

  4. 研究下JavaScript中的Rest參数和參数默认值

    研究下JavaScript中的Rest參数和參数默认值 本文将讨论使 JavaScript 函数更有表现力的两个特性:Rest 參数和參数默认值. Rest 參数 通常,我们须要创建一个可变參数的函数 ...

  5. 全面理解Javascript中Function对象的属性和方法

    http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...

  6. js中Frame框架的属性获取(1)

    js中window和document对象及如何操作iframe 一. window对象 . 什么是window对象? Window对象表示浏览器打开的窗口.如果文档包含iframe或者是frame标签 ...

  7. JavaScript中操作对象的属性

    1.操作对象的属性 注意: 标签属性与DOM对象属性的相应关系: 绝大部分2者是同样的.如:imgobj.src属性相应<img src="" >中src属性,但也有例 ...

  8. js中使用控件名和数组下标方式获取控件的值时失败

    在做界面展示时涉及到表单行项目的增加和删除时,我们一帮都使用js的脚本实现表单行的增加和删除,那么在进行表单的提交的时我们会再页面上进行提交数据的初步校验,进行数据的初步校验时,就要动态获取控件的值. ...

  9. javascript中对象访问自身属性的方式

    在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文 ...

随机推荐

  1. 【转】Android开发20——单个监听器监听多个按钮点击事件

    原文网址:http://woshixy.blog.51cto.com/5637578/1093936 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...

  2. ejabberd中的http反向推送

    http的反向推送通常使用"长轮询"或"长连接"的方式. 所谓"长轮询"是指客户端发送请求给服务器,服务器发现没有数据需要发送给客户端. h ...

  3. Hibernate4.x之映射文件

    POJO类和数据库的映射文件*.hbm.xml POJO类和关系数据库之间的映射可以用一个XML文档来定义 通过POJO类的数据库映射文件,Hibernate可以理解持久化类和数据库表之间的对应关系, ...

  4. iOS开发中提交带有中文或特殊字符串的参数

    iOS开发中,与后台进行数据交换是一个很常见的场景. 在web开发中,对于我们提交的地址,浏览器会负责进行decode,但是在ios中,必须要自己手动来实现.否则我们拼接出的网址在包括中文.特殊字符串 ...

  5. Jenkin+TestNG进行自动化测试执行

    1.登陆jenkins'后,主页面有一个jenkins管理选项,进入该模块,对插件,系统进行配置.(安装一个extend choice parameter插件) 2.点击new item新建一个项目, ...

  6. FOR 循环 索引从n 开始

    RF 中FOR 循环默认是从0开始,如果想从任意n开始如下所示: 方法一: 结果,如你所愿输出1-6: 方法二,利用FOR遍历list来实现: 结果: 这里注意是输出1-9而不是1-10

  7. winform中设置FormBorderStyle为None后点击任务栏自动最小化实现

    在winform编程中,有时候我们可能对窗体样式需要定义,不适用系统自带的样式,这样我们可以设置FormBorderStyle属性为None.但是设置了FormBorderStyle为None后,我们 ...

  8. PHP与MySQL动态网站开发1

    PHP内嵌在HTML中,置于 <?php ?> 标签内 一般php文件扩展名.php 在body结算标签之前 对于远程服务器,可以用ftp工具传程序 打印语句 echo'Hello Wor ...

  9. [原创]git使用入门

    创建git项目并初始化 建立一个新文件夹,然后将该文件夹定义为git项目 Lilis-MacBook-Pro:GitDir lili$ mkdir testgit Lilis-MacBook-Pro: ...

  10. [AHOI2006]文本编辑器 Splay tree区间操作

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1269 Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个 ...