码迷,mamicode.com
首页 > 编程语言 > 详细

javascript朝花夕拾

时间:2014-05-05 22:03:52      阅读:378      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   color   

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

例如:要做到这样的效果

点击每个选项时,会显示不同的div。

我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过程。

下面的例子就是:

首先,把妙味课堂、妙味茶馆、苗味视频选项的div设置为display:none;

然后,早在之前就以前设置好了数组的索引值

 btn[i].index=i;   
于是当所有div都设置为display:none后,再把点击的那个div的display设置wieblock就可以了
 contain[this.index].style.display="block";

bubuko.com,布布扣

bubuko.com,布布扣
 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 };
bubuko.com,布布扣

 

javascript朝花夕拾,布布扣,bubuko.com

javascript朝花夕拾

标签:style   blog   class   code   java   color   

原文地址:http://www.cnblogs.com/wuyinghong/p/3704903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!