例如:要做到这样的效果

点击每个选项时,会显示不同的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. 在PowerDesigner中设计物理模型2——约束

    唯一约束 唯一约束与创建唯一索引基本上是一回事,因为在创建唯一约束的时候,系统会创建对应的一个唯一索引,通过唯一索引来实现约束.不过唯一约束更直观的表达了对应列的唯一性,使得对应索引的目的更加清晰,所 ...

  2. Ext入门学习系列(四)面板控件

    第四章 使用面板 上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...

  3. MFC 状态栏相关使用(CStatusBar & CStatusBarCtrl)

    原文:MFC 状态栏相关使用(CStatusBar & CStatusBarCtrl),沙漠紫风铃 本文介绍了MFC中和状态栏相关的用法: 在MFC的的单文档应用中,在建好应用程序之后,CMa ...

  4. [转] Attach、Detach和DeleteObject

    原文:Attach.Detach和DeleteObject,想飞的梦想 1.CWnd Attatch和Detach的关系 首先,要明白Windows对象和MFC对象的区别. MFC对象实际上并没有把整 ...

  5. 关于C#中static静态变量

    C#静态变量使用static 修饰符进行声明,在类被实例化时创建,通过类进行访问不带有 static 修饰符声明的变量称做非静态变量,在对象被实例化时创建,通过对象进行访问一个类的所有实例的同一C#静 ...

  6. 6、四大组件之二-Service初步

    一.什么是Service 有些用时比较长得操作我们希望他在后台运行 ,不耽误我们当前的操作 . 这就引入了Service概念 . 常见的比如:访问网络 , 文件IO操作 , 大数据的数据库任务,播放音 ...

  7. Balanced Numbers(数位+状压)

    题意:求给定区间,一个数的数位上每个奇数出现偶数次,每个偶数出现奇数次,这样数的个数 分析:先考虑状态,但总是想不全,所以要把状态压缩一下,用三进制,0 该数不放  1 放了奇数次 2放了偶数次 dp ...

  8. 交易策略研究 R库

    本文在Creative Commons许可证下发布 交易策略研究 R库,直接安装:xts, TTR,quantmod,RTAQ,PerformanceAnalytics,FactorAnalytics ...

  9. ASP.NET服务器端控件(class0617)

    ASP.Net服务端基本控件介绍 ASP.Net服务端控件是ASP.Net对HTML的封装,在C#代码中就可以用txt1.Text=‘abc’这种方式来修改input的值,ASP.Net会将服务端控件 ...

  10. shell管道和重定向

    看了前面一节:linux shell数据重定向(输入重定向与输出重定向)详细分析 估计还有一些朋友是头晕晕的,好复杂的重定向了.这次我们看下管道命令了.shell管道,可以说用法就简单多了. 管道命令 ...