JavaScript实战练习之-Tag标签
来源:互联网 发布:希特勒回来了 知乎 编辑:程序博客网 时间:2024/05/17 22:47
新手刚开始学习JS未免有些急躁,迫切的想知道一些网站“特效”是怎么实现的。JS是门实战性很强的语言,
把基础知识学会了还要经过多加练习才能领悟其中的”艺术性“。
第一个例子:
Tab标签切换
效果图:
<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; } #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;} #tag .current{ color:#000; background:#ccc; } #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
HTML、CSS部分很简单易懂,这里就不多诠释了
JS部分:
window.onload=function(){ var tag=document.getElementById("tag").children; //获取Tag下的li,即Tag标签 var content=document.getElementById("tagContent").children; //获取Tag标签对应的内容 content[0].style.display = "block"; //默认显示第一个标签的内容 var len= tag.length; for(var i=0; i<len; i++) { tag[i].index=i; //为何如此?(看下面解释) tag[i].onclick = function() { for(var n=0; n<len; n++) { tag[n].className=""; content[n].style.display="none"; } 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指向的是该元素,而不是全局变量或所在对象。
如换成
var a=function(){
alert(this);//window}
this则指向window对象。
可看出,虽然仅仅是个很简单的Tag标签切换功能,但也能涉及很多JS原理知识。
- JavaScript实战练习之-Tag标签
- Git Flow 之 Tag 标签
- javascript之DOM编程根据属性找标签练习
- Struts2 控制 标签 之 Generator Tag
- Struts2 控制 标签 之 Iterator Tag
- Struts2 控制 标签 之 Merge Tag
- Struts2 控制 标签 之 Subset Tag
- Struts2 数据 标签 之 Action Tag
- Struts2 数据 标签 之 Bean Tag
- Struts2 数据 标签 之 Date Tag
- Struts2 数据 标签 之 Include Tag
- Struts2 数据 标签 之 Text Tag
- Struts2 数据 标签 之 Property Tag
- git 项目管理之打标签tag
- tag标签
- TAG标签
- TAG标签
- Tag标签
- 估算那点事
- Cassandra常用命令
- 【天道酬勤】
- informix HDR基本管理
- 推荐: 遇见未知的自己
- JavaScript实战练习之-Tag标签
- INFORMIX HDR的配置
- DHTML
- 多线程算法(完整版)
- 软件文档知多少?
- INFORMIX ISM备份管理器配置过程
- 马可.安东尼-悲剧英雄
- 用PostMessage或SendMessage发送结构体指针 .
- INFORMIX RSS原理和配置