(一)javascript中的数组index属性——获取数组的索引值

例如:要做到这样的效果

点击每个选项时,会显示不同的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";


 1 window.onload=function(){
2 var main=document.getElementById("main");
3 var btn=document.getElementsByTagName("li");
4 var contain=getByClass(main, "contain");
5 var i=0;
6 contain[0].style.display=‘block‘;
7 for (i=0;i<btn.length;i++){
8 btn[i].index=i; //索引值
9 btn[i].onclick=function(){
10 for(i=0;i<btn.length;i++){
11
12 btn[i].className="";
13 contain[i].style.display=‘none‘;
14 }
15 contain[this.index].style.display="block"; //利用this对象,表示当前所点击的对象,再利用我们设置好的索引值,实现了当前点击对象的display:block
16 };
17
18 }
19
20 };

时间: 2024-10-17 21:11:16

(一)javascript中的数组index属性——获取数组的索引值的相关文章

JavaScript 数组 length 属性获取数组长度或设置数组元素的数目

JavaScript 数组 length 属性 JavaScript 数组 length 属性可返回或设置或组中元素的数目,语法如下: array_object.length 利用 length 属性得到元素数目 <script language="JavaScript"> var array_1 = new Array('a',10.5,true); document.write( '数组长度 ' + array_1.length ); </script> 运

包装对象——JavaScript中原始类型拥有属性的原因

我们先看段代码: var s = "Test"; var len=s.length; 我们知道在JavaScript中像上面这样声明的字符串不是对象,但既然这里的s不是对象,为什么会有length的属性呢? 原因是在JavaScript中只要引用了字符串(数字.布尔值也是一样的)的属性,JS就会将字符串通过调用new String(s)的方式转换成对象,这个对象继承了字符串的方法,并被用来处理属性的引用.一旦属性引用结束,这个新创建的对象就会销毁(真实实现并不一定是这样,但整个过程看起

什么情况下使用break关键字? 什么情况下使用Continue关键字? Java如何声明一个数组?JS如何声明一个数组?如何获取数组长度? 如何遍历数组?

什么情况下使用break关键字?什么情况下使用Continue关键字? Break Break关键用于终止循环. 示例: 1 2 3 4 5 6 for (int i = 0; i < 10; i++) {   if (i == 4) {     break; //终止循环,后面的循环不再执行   }   System.out.println(i); } Continue Continue关键字用于终止本次循环,其它循环继续. 示例: 1 2 3 4 5 6 7 for (int i = 0;

jquery获取当前元素索引值index()方法(总结)

jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置.如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置.如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. 1 <ul> 2 <li id="foo">foo<

全面理解Javascript中Function对象的属性和方法

函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这些属性和方法,这对于理解Javascript的继承机制具有一定的帮助. 属性(Properties) arguments 获取当前正在执行的 Function 对象的所有参数,是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length.还有就是arguments对象存储的是实际传递给

JavaScript中操作对象的属性

1.操作对象的属性 注意: 标签属性与DOM对象属性的对应关系: 绝大部分2者是相同的,如:imgobj.src属性对应<img src="" >中src属性,但也有例外,如<div class="main" >中,操作class属性用divobj.className. CSS属性与DOM对象属性的对应关系: 1. 两者通过obj.style.css属性名 相对应   如:obj.style.width. 2.如果CSS属性带有横线,如bor

JavaScript中的内置对象(数组、Boolean、Number、字符串)和自定义对象

JS中常用的内置对象有:数组.Boolean类.Number类.字符串.下面分别介绍各自的常用方法 JS中的数组 1.数组的声明 ①字面量声明 直接使用[]声明数组: var arr=[1,2,"3",true,null,undefined]; 在JS中同一数组可以存放各种数据类型. ②使用new关键字声明:var arr = new Array(); 参数可以有三种形式: >>> 不传参数,表示创建一个长度为0的空数组: >>> 传入一个数值,表示

javascript中对象访问自身属性的方式

在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文状态,即添加this关键字.如果没有指定,则上下文默认为window. 举例如下: 1 var obj = 2 { 3 name:"James", 4 showName:function(){ 5 alert(name); 6 } 7 } 通过控制台执行obj.showName() 输出为

listView中的button控件获取item的索引

在listview中的listitem设置事件响应,如果listitem中有button控件,这时候listitem就不会捕获到点击事件,而默认的是listitem中的button会捕获点击事件.那么如果点击listitem中的button怎么才能这个button是在哪一个item中呢,换句话说,就是点击listitem中的button怎么获取该listitem的索引?得到了这个索引的话,item里边的值就相对容易了. 通过如下方法可以实现: 1.在listitem中初始化button的时候,给