JS学习笔记 - 普通选项卡（面向过程）
疑问：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>普通选项卡</title>
<style>
#div1 input{
background: white;
}
#div1 input.active{
background: yellow;
/* 这里直接给className为active的标签设置颜色， 1. 第一个按钮默认是黄色，所以需要先设置。
2. js只需要先清空所有input的className，再把点击的this按钮 className变成active。
不应该用js设置颜色式样！错误： aBtn[i].style.background-color = yellow;
*/
}
#div1 div{
width: 200px;
height: 200px;
background-color: #ccc;
display: none;
}
</style> <script>
window.onload = function()
{
var oDiv = document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div'); for(var i=0; i<aBtn.length; i++)
{
aBtn[i].index = i;
//把aBtn的index顺序变成数值，以便于后面aDiv使用 aBtn[i].onclick = function()
{
for(var i=0; i<aBtn.length; i++)
{
aBtn[i].className = ''; // 先清空 所有按钮 和 div 的样式
aDiv[i].style.display = 'none';
}; this.className = 'active'; // 把点击的 这个按钮 类名 变成 ‘active’ aDiv[this.index].style.display = 'block';
// 和按钮序号相对应的div，display变成block // aDiv[this.index] ==> aBtn[i].index = i
// 把aBtn的index顺序变成数值，以便于后面aDiv使用
//疑问，怎么不能直接写 aDiv[i] ？
};
};
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="aaa">
<!-- 默认把第一个按钮的class设置为active，即背景色为yellow -->
<input type="button" value="bbb">
<input type="button" value="ccc"> <div style="display: block";>mfdkjgmdkgm</div>
<!-- 默认把第一个div的display设置为block-->
<div>我梦见你梦见我</div>
<div>14597825</div>
</div>
</body>
</html>
错误1：
<script>
window.onload = function ()
{
var aBtn = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
var aDiv = oDiv.getElementsByTagName('div'); for(var i=0; i<aBtn.length; i++)
{
aBtn[i].index = i; aBtn[i].onclick = function()
{
for (var i=0; i<aBtn.length;i++) {
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
// aBtn[i].className = '';
// 不是直接在onclick事件里 用 aBtn[i] 给其他所有按钮、div设置样式。
// aBtn[i] 只表示单个，再用一个for循环来处理，才表示全部。 this.className = 'active';
aDiv[this.index].style.display = 'block';
}
}
}
</script>
错误2：
<script>
window.onload = function()
{
var aBtn = document.getElementsByTagName('input'); for(i=0; i<aBtn.length; i++)
{
aBtn[i].onclick = function()
{
//aBtn[i].className = 'active';
this.className = 'active';
// 当前事件作用于 this， 所以给 this 加 className
};
};
};
</script>
JS学习笔记 - 普通选项卡（面向过程）的更多相关文章
- JS学习笔记 - 面向对象 - 选项卡 （普通选项卡改写）
选项卡3 <script> window.onload=function () { new TabSwitch('div1'); }; function TabSwitch(id) // ...
- C#学习笔记——面向对象、面向组件以及类型基础
C#学习笔记——面向对象.面向组件以及类型基础 目录 一 面向对象与面向组件 二 基元类型与 new 操作 三 值类型与引用类型 四 类型转换 五 相等性与同一性 六 对象哈希码 一 面向对象与面向组 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- 一点感悟：《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- 一招制胜---详解分布式系统里session同步
一招制胜---详解分布式系统里session同步 几周前,有个盆友问老王,说现在有多台服务器,怎么样来解决这些服务器间的session同步问题?老王一下就来精神了,因为在n年以前,老王还在学校和几个同 ...
- MAC 下的简单 SHELL 入门
1.创建文件 .sh 文件 本例,将 sh 文件全名为 demo.sh,接下来使用随意熟悉的编辑器编辑命令就可以 2.编写 .sh 文件 #!/bin/sh echo +--------------- ...
- php 内置的 html 格式化/美化tidy函数 -- 让你的HTML更美观
php 内置的 html 格式化/美化tidy函数 https://github.com/htacg/tidy-html5 # HTML 格式化 function beautify_html($htm ...
- javap 命令 反编译代码
javap 命令 javap -c classname 一个好的分析class二进制文件的 链接 http://blog.csdn.net/pwlazy/article/details/7954169
- OpenCV —— HighGUI
分为:硬件相关部分,文件部分以及图形用户接口部分 创建窗口 —— cvNamedWindow 若设置成 CV_WINDOW_AUTOSIZE 窗口大小会随着图像的载入而根据图像大小调整,用户没办法手动 ...
- CString与 char *之间的转换
http://www.cnblogs.com/watsonlong/archive/2011/04/15/2017086.html
- 【canvas】跟随鼠标的星空连线
2019-01-23 19:57:38 挂一个比较简单的一个canvas应用,利用CPU进行粒子实时计算,直接面向过程写的 帧动画:浏览器在下一个动画帧安排一次网页重绘, requestAnimat ...
- lastlog---显示系统中所有用户最近一次登录信息。
lastlog命令用于显示系统中所有用户最近一次登录信息. lastlog文件在每次有用户登录时被查询.可以使用lastlog命令检查某特定用户上次登录的时间,并格式化输出上次登录日志/var/log ...
- CSS3：元素的边框、背景和大小
边框 和边框相关的属性例如以下. border-width 用于设置边框的宽度,可选择包含: 1)<长度值>:将边框宽度设为以CSS度量单位(如em.px.cm)表达的长度值. 2)< ...
- 内网使用 IPV6 之Teredo篇
这篇转载自 http://bbs.pcbeta.com/viewthread-1580771-1-1.html 上IPv6站点之Teredo篇http://bbs.pcbeta.com/viewthr ...