例如:要做到这样的效果
点击每个选项时,会显示不同的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