例如:要做到这样的效果

点击每个选项时,会显示不同的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. mysql CMAKE 参数说明

    MySQL自5.5版本以后,就开始使用CMake编译工具了,因此,你在安装源文件中找不到configure文件是正常的.很多人下到了新版的MySQL,因为找不到configure文件,不知道该怎么继续 ...

  2. 方格取数(1)(HDU 1565状压dp)

    题意: 给你一个n*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的和最大.   分析:直接枚举 ...

  3. HDU 5636 Shortest Path 分治+搜索剪枝

    题意:bc round 74 分析(官方题解): 你可以选择分类讨论, 但是估计可能会写漏一些地方. 只要抽出新增边的端点作为关键点, 建立一个新图, 然后跑一遍floyd就好了. 复杂度大概O(6^ ...

  4. LeetCode题解——Longest Palindromic Substring

    题目: 给定一个字符串S,返回S中最长的回文子串.S最长为1000,且最长回文子串是唯一. 解法: ①遍历,对于每个字符,计算以它为中心的回文子串长度(长度为奇数),同时计算以它和右边相邻字符为中心的 ...

  5. 给定金额m和红包数量n

    这一题如果是采用暴力手段,不一定能获得正确答案,而且也非常耗时. 所以下面我们采用一个小技巧,也就是先产生n-1个红包,总得sum<m的,这样最后只要添加一个sum-m的红包钱数就可以了. 具体 ...

  6. 大规模Hadoop集群实践:腾讯分布式数据仓库(TDW)

    TDW 是腾讯最大的离线数据处理平台.本文主要从需求.挑战.方案和未来计划等方面,介绍了TDW在建设单个大规模集群中采取的 JobTracker 分散化和 NameNode 高可用两个优化方案. TD ...

  7. wuzhicms 模块开发

    首先,模块开发需要了解五指cms的目录结构: 然后,我们需要新增加一个模块目录: 再app下面创建 如:content 下面包含文件: 前台文件的创建: 看下 index.php 的内容: <? ...

  8. C# 调用Dll 传递字符串指针参(转)

    http://www.cnblogs.com/jxsoft/archive/2011/07/06/2099061.html

  9. 利用doxygen提高源代码阅读效率

    阅读开源项目的源代码是提高自己编程能力的好方法,而有一个好的源代码阅读工具无疑能够让你在阅读源代码时事半功倍.之前找过不少源代码阅读工具,像SourceInsight.sourcenav.scitoo ...

  10. HDU 4497 GCD and LCM (数论)

    题意:三个数x, y, z. 给出最大公倍数g和最小公约数l.求满足条件的x,y,z有多少组. 题解:设n=g/l n=p1^n1*p2^n2...pn^nk (分解质因数 那么x = p1^x1 * ...