JavaScript学习笔记（二）——选项卡小结
Js制作选项卡小结
1.先构思好需要展示的页面效果，比如这样
2.需要显示的效果通过html和css制作出来，包括选项（第一课、第二课）的鼠标停留背景变色、下方选项页内容切换的内容等。
3.把此选项卡分为上下两个部分，并且3个选项对应3个选项页面。上方为id为tab的固定div，需要变换的是鼠标放入li时li切换背景（比如此时li为灰色背景）；下方为content容器div，放入需要展示的内容（本例中为3个ul），初始效果为第一个ul显示block，后面两个为display：none。
4.将需要操作的元素提取出来，剩下的就是用代码实现元素的显示和隐藏。
个人总结：选项卡制作其实挺简单，一开始自己的想法是下方制作3个div来分别显示不同的选项页，后来查看源码时发现可以放入一个div（content）然后控制ul的显示来实现相同的效果，并且代码量变少，逻辑也更紧密，并且联系实际的话，下方若需固定高度则只需content设置即可。
下方为demo的代码行以及注释。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易选项卡</title>
<style>
body,ul,li{margin: 0;padding: 0;}
body{font:12px/1.5 tahoma;}
#outer{width: 450px;margin:10px auto;}
#tab{overflow: hidden;zoom:1;background: #000;border: 1px solid #000;}
#tab li{float: left;color: #fff;height: 30px;cursor: pointer;line-height: 30px;list-style-type: none;padding: 0 20px;}
#tab li.current{color: #000;background: #ccc;}
#content{height: 100px;border: 1px solid #000;border-top-width: 0;} /*通过容器高度可固定选项页高度。*/
#content ul{line-height: 25px;display: none;margin: 0 30px;padding: 10px 0;}
</style>
<script>
window.onload=function(){
var oLi=document.getElementById("tab").getElementsByTagName("li"); //提取选项li
var oUl=document.getElementById("content").getElementsByTagName("ul"); //提取容器内列表，此页有3个，目前第一个为block，其余为none
for (var i = 0; i < oLi.length ; i++) {
oLi[i].index=i;
oLi[i].onmouseover=function(){
//这里的length为3，循环重置tab中所有li的样式
for (var n = 0; n < oUl.length; n++) oLi[n].className="";
//这里的this为当前鼠标放置的li，此时再将样式设置为更改后的current
this.className="current";
//同前两段代码道理相同，先重置所有再单独设置当前
for (var n = 0; n < oUl.length; n++) oUl[n].style.display="none";
//因为选项和选项页为互相绑定，通过this.index可以确认需要显示的选项页
oUl[this.index].style.display="block";
};
};
}
</script>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div id="content"> <!-- 用一个div包裹多个ul，通过js设置ul的显示来实现选项卡的切换 -->
<ul style="display: block;">
<li>网页特效原理分析</li>
<li>响应用户操作</li>
<li>提示框效果</li>
</ul>
<ul>
<li>改变网页背景颜色</li>
<li>函数传参</li>
<li>高重用性函数的编写</li>
<li>126邮箱全选效果</li>
<li>循环及遍历操作</li>
<li>调试器的简单使用</li>
</ul>
<ul>
<li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
<li>JavaScript出现的位置、优缺点</li>
</ul>
</div>
</div>
</body>
</html>
JavaScript学习笔记（二）——选项卡小结的更多相关文章
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...
- JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象
一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...
- javascript学习笔记二
1.js的string对象 **创建 String对象 *** var str = "abc"; **方法 和 属性(文档) *** 属性 length : 字符串的长度 ***方 ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- amazeui学习笔记二（进阶开发4）--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
随机推荐
- 进军VR虚拟现实-先来全景智慧城市-有梦想的互联网创业者
随着VR的大火,越来越多的企业开始进军VR行业,不过并不是所有企业进军VR行业都是成功的,那么问题来了,VR虚拟现实行业投资怎么做才能取得成功呢?这是当下很多企业面临的一个问题,VR虚拟现实行业投资也 ...
- VR全景智慧城市-VR大时代
这是一个创业的时代,这是一个创新的社会,我们的国家从没有像今天这样高度重视创业创新,我们的社会从没有像今天这样对创业创新寄予如此厚望.李克强总理在2015年政府工作报告中指出:要把"大众创业 ...
- es6之Generator
1.Generator函数其实是一个封装了多个内部状态的状态机,执行它会返回一个遍历器对象,然后可以依次遍历Generator中的每一个状态,也就是分段执行,yield是暂停执行的标记,next恢复执 ...
- fiddler导致页面确定按钮无法使用（测试遇到的问题经验）
这几天在测试的是遇到几个问题,就是在删除或者保存有些提示信息的时候 比如下面这种: 点击确定的时候,一直无响应,换了几台电脑其他电脑都是正常的,本机清楚缓存.关闭浏览器重新打开.重启电脑都试过了了就是 ...
- springboot 1.5.2 thymeleaf 添加templates 静态资源访问路径
从velocity 模板切换到thymeleaf 后, 默认模板位置为templates , 有时候静态资源方在该目录下会出现访问404错误 解决办法: application.properties ...
- 观《IT培训行业揭秘》触发北大青鸟回忆
在园子里看到这篇文章<IT培训行业解密(六)>时,挺有感触,回忆顿时涌上心头: 我想起了当年单纯的我们因为各自的原因来到北大青鸟,或因前途迷茫而选择想找一条出路,或因父母的信息闭塞而想给我 ...
- jQuery总结--版本二 事件处理函数
一:事件处理函数 (1) one(事件名称, fn) 仅对指定事件监听一次,监听事件只会执行一次 <!DOCTYPE html> <html> <head lang=&q ...
- firstChild,lastChild,nextSibling,previousSibling & 兼容性写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hdu 5975---Aninteresting game（树状数组）
题目链接 Problem Description Let’s play a game.We add numbers 1,2...n in increasing order from 1 and put ...
- python 创建mysql数据库
昨天用shell脚本创建数据库,涉及java调用,比较折腾,改用python直接创建数据库,比较方便,好了,直接上代码,相关注释也添加了 # _*_encoding:UTF-8_*_import My ...