JS 实现 Tab标签切换功能
2015-12-08 10:55
736 查看
效果图:
HTML部分:
CSS:
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)。尤其重要的是他们取得的是外部变量的最后一个值!也就是
弹出的都是3,因为3是for循环中i最终的值。解决办法就是为每个tag[i]添加一个index值,在函数内部通过this.index调用即可与i同步
代码同时也涉及this的取值问题.
操作DOM事件时(如onclick、onmouseover..)函数中的this指向的是该元素,而不是全局变量或所在对象。
如换成
vara=function(){alert(this);//window}
this则指向window对象。
可看出,虽然仅仅是个很简单的Tag标签切换功能,但也能涉及很多JS原理知识。
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原理知识。
相关文章推荐
- js实时上传文件显示缩略图
- 阿赫亚web安全JSON
- javascript将base64编码的图片数据转换为file并提交
- js随意拖动图片
- JS刷新当前页面的几种方法总结
- js 循环 for in
- 详解js中构造流程图的核心技术JsPlumb(2)
- 【学习】JavaScript设计模式——认识设计模式
- 详解js中构造流程图的核心技术JsPlumb
- js中引用传递和值传递
- NewTonJson.Net的使用
- 常规功能和模块自定义系统 (cfcmms)—022自定义grid列(6图标列)
- ArcGIS API for javascript开发笔记(七)——使用ArcGIS API for javascript调用GP服务
- JavaScript基本数据类型
- JS操作XML实例总结(加载与解析XML文件、字符串)
- JavaScript 的性能优化:加载和执行
- javaweb开发-js代码中keypress事件调用判断,取得keyCode值
- js原生设计模式——9外观模式封装2(小型代码库YJ)
- js页面传参数时,参数值包含特殊字符的处理
- js原生设计模式——9外观模式封装