例如:要做到这样的效果

点击每个选项时,会显示不同的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. 如何在asp.net mvc3中使用HttpStatusCode

    下载了asp.net mvc 4的源码看了看,没怎么看清楚.不过个人觉得MVC4 beta中Web API这个是比较不错的,虽然说它是往传统回归. web api最好的莫过于它更加适合使用jquery ...

  2. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  3. Zabbix探索:资产信息的妙用

    前一阵子还在考虑CMDB的问题,因此Zabbix中的Inventory,也就是所谓的资产信息,遭到了我的不少鄙视. 这几天在研究告警通知对应责任人的问题,突然想起Zabbix的资产信息中应该有这么一栏 ...

  4. activemq 一个不错的ppt

    http://people.apache.org/~jstrachan/talks/ActiveMQ-Dublin07.pdf

  5. MMU(why)

    在ARM中,MMU几个主要作用: 1. I/D Cache 管理      -> 大幅提高代码运行效率. 2. PA/VA 重映射        -> 实现多进程内存空间映射. 3. 内存 ...

  6. pollard_rho和Miller_Rabin

    Miller_Rabin就是以概论大小来判断素数 可以判断2^63范围的数 pollard_rho推荐两个很好的博客来理解:整数分解费马方法以及Pollard rho和[ZZ]Pollard Rho算 ...

  7. 菜鸟学习HTML5+CSS3(一)

    主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD)    HTML 5的DTD声明为:<!d ...

  8. leetcode@ [54/59] Spiral Matrix & Spiral Matrix II

    https://leetcode.com/problems/spiral-matrix/ Given a matrix of m x n elements (m rows, n columns), r ...

  9. Java网络编程(客户端和服务端原理)

    运行下面的程序,浏览器端输入自己主机的IP地址+端口号(8888),会看到服务器返回的数据内容,Eclipse控制台会打印显示收到的信息, 通过我们自定义的服务器,可以看到浏览器端向服务器发送的请求信 ...

  10. hdu 2716 Message Decowding

    Message Decowding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...