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的开发者 ...
随机推荐
- jQuery和JavaScript的点击事件区别
// $("#indexPage").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("indexP ...
- Linux Unix shell 编程指南学习笔记（第二部分）
第七章 正則表達式介绍 匹配行首与行尾 匹配数据集 职匹配字母和数字 句点 "." 匹配随意单字符. ^,在行首 匹配字符串或字符序列,如查询当前文件夹下的全部文件夹: ls - ...
- 路由及路由器工作原理深入解析3：路由与port
日志"路由及路由器工作原理深入解析1"http://user.qzone.qq.com/2756567163/blog/1438322342介绍了"为什么要使用路 ...
- android-开发环境相关概念
Android中IDE.ADT.SDK.JDK.NDK的解释 1. IDE: Intelligent Development Environm的简称.即智能开发环境.是一种开发工具.常用的IDE有ad ...
- 70.nodejs操作mongodb
转自:https://www.cnblogs.com/whoamme/p/3467374.html 首先安装nodejs mongodb npm install mongodb var mongodb ...
- js中常用的对象—Array的属性和方法
今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...
- 小项目: low版本的 员工信息程序:
### 附加两个文件1 user_info 和worker_info flag = False def logon(): #登录函数 global flag usr = input('Username ...
- CentOS6.5下的Nagios安装配置详解（图文）
最近因为,科研需要,接触上了Nagios,这里,我将安装笔记做个详解.为自己后续需要和博友们学习! VMware workstation 11 的下载 VMWare Workstation 11的安装 ...
- IOS 一句代码搞定启动引导页
前言引导页,一个酷炫的页面,自从微博用了之后一下就火起来了,对于现在来说一个app如果没有引导页似乎总显那么不接地气,那么为了让我们的app也“高大上”一次,我写了一个demo来实现启动引导页的实现, ...
- vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...