例如:要做到这样的效果

点击每个选项时,会显示不同的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. OA,ERP等源码一部分演示

    更多源码http://www.pssdss.com QQ:11851298 功能强大的JAVA开发的ERP源码http://cx050027.pssdss.com:8080/   用户名pssdss  ...

  2. XUtils框架的学习(一)

    一  xutils框架引入到AndroidStudio工程,最简单的方法:① 在APP的build.gradle里面加入 compile 'org.xutils:xutils:3.3.36'.② 一定 ...

  3. erlang mnesia 数据库实现SQL查询

    Mnesia是一个分布式数据库管理系统,适合于电信和其它需要持续运行和具备软实时特性的Erlang应用,越来越受关注和使用,但是目前Mnesia资料却不多,很多都只有官方的用户指南.下面的内容将着重说 ...

  4. ASP.NET MVC 基础

    ASP.NET MVC oo1 Mvc准备工作课程安排:ORM->AspNet MVC开发环境:VS2012/VS2013SqlServer2008/2005主讲Asp.Net Mvc4 Raz ...

  5. 让你的.NET程序支持多语言

    辛辛苦苦做出来的软件,我们当然希望能让更多的人用,支持多语言是必须的.下面我将以Asp.net Web Form为例来介绍如何支持多语言.其他程序比如windows程序,过程都是大同小异的. 大概分以 ...

  6. QTP检查点和参数化_百度一下

    一.脚本编辑检查点: Browser("百度知道 - 全球最大中文互动问答平台").Page("百度知道 - 全球最大中文互动问答平台").WebEdit(&q ...

  7. 第一章:绪论-Python开发工具的安装

    书中提到了操作系统平台尽量选 *nix.我这里选用的是 ubuntu 14.04 , 下面的操作均以此操作系统为例说明. 操作系统安装教程可以去网站上找,推荐用虚拟机的方式,Windows下可用的虚拟 ...

  8. 【Zookeeper学习】Zookeeper-3.4.6安装部署

    [时间]2014年11月19日 [平台]Centos 6.5 [工具] [软件]jdk-7u67-linux-x64.rpm zookeeper-3.4.6.tar.gz [步骤] 1. 准备条件 ( ...

  9. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  10. 解决下载Android Build-tools 19.1.0失败

    准备从Eclipse转到Android Studio了.今天尝试Android Studio的时候,被它提醒我SDK的Android Build-tools版本过低,需要升级. 于是打开Android ...