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学习笔记（二）——选项卡小结的更多相关文章

  1. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...

  2. JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  3. javascript学习笔记二

    1.js的string对象 **创建 String对象 *** var str = "abc"; **方法 和 属性(文档) *** 属性 length : 字符串的长度 ***方 ...

  4. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  5. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  6. amazeui学习笔记二（进阶开发4）--JavaScript规范Rules

    amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...

  7. Javascript学习笔记三——操作DOM（二）

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  8. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  9. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  10. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

随机推荐

  1. 基于HTML5快速搭建TP-LINK电信拓扑设备面板

    今天我们以真实的TP-LINK设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动. 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink ...

  2. 加盟全景-加盟VR虚拟现实-全景智慧城市

    作为一个技术整合型产业,VR行业的硬件厂商几乎没有任何技术基础,很多国产虚拟现实VR创业公司基本都是和几家固定的上游零部件提供商合作,全行业都在等待高通骁龙芯片的升级,这和手机行业有几分相似.去年3月 ...

  3. 用CSS3伪类实现书签效果

    前两天想给博客上添个书签效果,类似于下面这样: 在网上搜索一番后,发现一篇纯css书签导航按钮用三个div实现了这个效果.但是博客园可没有给我这么多div,所以试着用伪类实现了一下. before,a ...

  4. Android 工程集成React Native 0.44 注意点

    当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...

  5. 使用公共 Registry - 每天5分钟玩转 Docker 容器技术（19）

    保存和分发镜像的最直接方法就是使用 Docker Hub. Docker Hub 是 Docker 公司维护的公共 Registry.用户可以将自己的镜像保存到 Docker Hub 免费的 repo ...

  6. jQuery中易混淆知识点总结（持续更新）

    find()与children() <body> <ul class="level-1"> <li class="item-i"& ...

  7. Spring MVC动态切换数据源（多数据库类型）

    最近由于项目需求,需要将Sql Server 和 Mysql 两种数据库整合到一个项目,项目的用到的框架是SSM. 因此尝试了利用AOP切面来切每次执行的Servcie方法,根据Service所在的包 ...

  8. Myeclipse 配置多个tomcat

    1.首先准备多个tomcat 命名为: tomcat-8087  tomcat-8088 tomcat-8089     2.修改对应的server.xml ①:修改关闭时端口,分别设为 8005 8 ...

  9. android 模拟器对应键盘快捷键

    一位同事的总结资料: Android SDK2.0.1自带的虚拟机尺寸都比较小(不针对机型,只为了在PC上看的舒服一点,当然越大越好了,我最大设置成1050*450,但是自带的屏保会不够宽,900*4 ...

  10. 排序算法 - 插入排序(Insertion sort)

    插入排序对于少量元素的排序是很高效的,而且这个排序的手法在每个人生活中也是有的哦. 你可能没有意识到,当你打牌的时候,就是用的插入排序. 概念 从桌上的牌堆摸牌,牌堆内是杂乱无序的,但是我们摸上牌的时 ...