您的位置：首页 > Web前端 > JavaScript

JS 实现 Tab标签切换功能

2014-08-22 16:31 459 查看
Tab标签切换

效果图：



HTML部分:

<
div
class
=
"wrap"
>

<
ul
id
=
"tag"
>

<
li
class
=
"current"
>标签一</
li
>

<
li
>标签二</
li
>

<
li
>标签三</
li
>

</
ul
>

<
div
id
=
"tagContent"
>

<
div
>内容一<
br
>内容一</
div
>

<
div
>内容二<
br
>内容二</
div
>

<
div
>内容三<
br
>内容三</
div
>

</
div
>

</
div
>


　　

CSS:

*{
margin
:
0
;
padding
:
0
;}

.wrap{
width
:
500px
;
margin
:
10px
auto
;}

#tag{
width
:
498px
;
overflow
:
hidden
;
background
:
#000
;
border
:
1px
solid
#000
;}

#tagli{
list-style
:
none
;
float
:
left
;
margin-right
:
0px
;
color
:
white
;
padding
:
5px
20px
;
cursor
:
pointer
;}

#tag.current{
color
:
#000
;
background
:
#ccc
;}

#tagContentdiv{
width
:
498px
;
border
:
1px
solid
#000
;
border-top
:
none
;
height
:
300px
;
display
:
none
;}


　　
JS部分：

window.onload=function()//onload事件句柄，文档装载结束时调用

{
vartag=document.getElementById("tag").children;//获取Tag下的li，即Tag标签
varcontent=document.getElementById("tagContent").children;//获取Tag标签对应的内容
content[0].style.display="block";//默认显示第一个标签的内容
varlen=tag.length;
for(vari=0;i<len;i++)//无论点击谁都能实现当前显示，其余隐藏
{
tag[i].index=i;//为何如此？（看下面解释）
tag[i].onclick=function()//0级DOM的事件句柄注册

{

for(varn=0;n<len;n++)

{
tag
.className="";
content
.style.display="none";
}//首先将全部的div隐藏
tag[this.index].className="current";
content[this.index].style.display="block";
}
}

}

解释：代码涉及了JS的闭包。

闭包：函数能访问定义他们的外部函数的变量和参数（除了this、arguments）。尤其重要的是他们取得的是外部变量的最后一个值！也就是

tag[i].onclick=function(){alert(i);//3}


弹出的都是3，因为3是for循环中i最终的值。解决办法就是为每个tag[i]添加一个index值，在函数内部通过this.index调用即可与i同步

代码同时也涉及this的取值问题.

tag[i].onclick=function(){alert(this);//DOM元素}


操作DOM事件时（如onclick、onmouseover..）函数中的this指向的是该元素，而不是全局变量或所在对象。

如换成

vara=function(){alert(this);//window}

this则指向window对象。

可看出，虽然仅仅是个很简单的Tag标签切换功能，但也能涉及很多JS原理知识。

原文链接：http://blog.csdn.net/wangxiaohui6687/article/details/8523079
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航