例如:要做到这样的效果

点击每个选项时,会显示不同的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. 新功能:Azure 负载平衡器的空闲超时现可配置了

    Yves Pitsch Azure 网络首席项目经理 我们很高兴地宣布,Azure负载平衡器现在可以为云服务和虚拟机提供可配置的 TCP空闲超时支持.要配置此功能,可以使用服务管理 API.Power ...

  2. Java [Leetcode 217]Contains Duplicate

    题目描述: Given an array of integers, find if the array contains any duplicates. Your function should re ...

  3. 学习面试题Day03

    1.Java中的注释有哪些? 如果不算Annotation,Java的注释有3种,即行注释.块注释和文档注释.它们往往适合于不同地方的注释,其中文档注释比较特殊,它的注释信息可以进入到javadoc文 ...

  4. (Java)《head first java》值得Java或面向对象基础的新手看。

    看完这本书后本人收获良多. 内容对Java以及面向对象的入门者非常友好. 抽象的内容惯用图解的方法来剖析,通俗易懂 之前看C#入门经典的面向对象时,依然浓浓的一头雾水. (1)很不解为何实例化要写成A ...

  5. SQL注入攻击的种类和防范手段

    观察近来的一些安全事件及其后果,安全专家们已经得到一个结论,这些威胁主要是通过SQL注入造成的.虽然前面有许多文章讨论了SQL注入,但今天所讨论的内容也许可帮助你检查自己的服务器,并采取相应防范措施. ...

  6. Physics2D.Linecast中的参数layerMask

    static RaycastHit2D Linecast(Vector2 start, Vector2 end, int layerMask = DefaultRaycastLayers, float ...

  7. 把之前写的几个项目放到了github上

    之前有的源码放在我的电脑里不知道什么时候就没了,满满都是回忆啊,怪可惜的. https://github.com/redclock/Adv-Game:一个java游戏 https://github.c ...

  8. python def说明

    可以这样讲,def定义了一个模块的变量,或者说是类的变量.它本身是一个函数对象.属于对象的函数,就是对象的属性.当然,你也可以叫它“方法”. python 的函数和其他语言的函数有很大区别.它是可以被 ...

  9. HDU-4336 Card Collector 概率DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4336 题意:买食品收集n个卡片,每个卡片的概率分别是pi,且Σp[i]<=1,求收集n个卡片需要 ...

  10. 如何把匿名类型.GetType()返回的对象传进泛型里面[转]

    //怎么取得匿名类型的Type放到 //泛型T当中?? var 匿名 = new { A = 0, B = 1 }; Type t = 匿名.GetType(); //然后下面 var xx = db ...