JS学习进程(二)
来源:互联网 发布:巨人网络集团 编辑:程序博客网 时间:2024/06/05 12:03
选项卡
CSS:注意要点:显示隐藏的元素设置相对定位position:absolute
HTML:注意要点:使用<ul><li></li></ul>制作选项卡
JS:
var oLiLetter=document.getElementById("banner-letter").getElementsByTagName("li");
var oUlBannerA=document.getElementById("banner-a").getElementsByTagName("ul");
oLiLetter[0].className="lion"
oUlBannerA[0].style.display="block";
for(var i=0;i<oLiLetter.length;i++){
oLiLetter[i].index=i;
oLiLetter[i].onmouseover=function(){
for(var j=0;j<oLiLetter.length;j++){
oLiLetter[j].className=""
oUlBannerA[j].style.display="none";
}
this.className="lion"
oUlBannerA[this.index].style.display="block";
}
}
完美~~
记录一下自己的思路 有三个要点
要点一:关联选项和内容DIV,将I的值赋值给自定义属性index,保存变量,防止闭包
要点二:遍历整个li将li和ul的所有className清空,将ul设置为隐藏
要点三:this指向当前触发的对象,将关联起来的ul内容显示。
- JS学习进程(二)
- JS学习---(二)
- JS学习(二)
- JS学习(二)
- js学习(二)
- js学习进程(一)
- JS学习进程(三)
- JS学习记录(二)
- js学习(二)this
- js学习笔记(二)
- processing.js 学习(二)
- Vue.js 学习(二)
- js学习笔记(二)
- vue.js学习(二)
- JS学习笔记(二)
- JS学习笔记(二)
- Android学习进程(二):Hello,world!
- Linux学习记录之进程(二)
- [JavaScript] Chrome启用ES6支持
- SSH框架---Spring官网下载各版本jar包
- Ubuntu常用命令
- 【Redis缓存机制】13.Java连接Redis_Jedis_事务
- Flume日志收集分层架构应用实践
- JS学习进程(二)
- android4.0.3 bluetooth
- 二叉树的遍历
- 关于PHP的$_SERVER["SERVER_NAME"]
- Sass学习之路(5)——变量
- VLFeat + vs 2012配置
- seajs使用常见问题
- Python Data Visualization
- 逗号表达式