/* 经过昨天一整天的纠结和摸索。总结下学习初期我最致命的几个问题……

1、var oDiv = document.getElementById('');    一定要多输，熟悉后o u什么的字母别搞错了 .后不能有空格啥的， E大写这些都还好，Elements 如果是s，后面接的是 className 或者 TagName 。

2、在js中，一定要区分清楚 class 和className ，前面很容易搞混……

3、遍历 for循环后，操作的对象一般是标签或者class，这是很多个对象，所以 一定要有[]…… ！！！

*/

------------------------------------------------正文的html ------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>简单的选项卡</title>
<style type="text/css">
　　#div1 .active{ background:#FF9; }
　　#div1 div{ width:200px; height:200px; border:1px solid #333; background:#CCC; display:none; }
</style>

</head>

<body>
<div id="div1">
　　<input class="active" type="button" value="教育" />
　　<input type="button" value="培训" />
　　<input type="button" value="招生" />
　　<input type="button" value="出国" />
　　<div style="display:block;">教育</div>
　　<div>培训</div>
　　<div>招生</div>
　　<div>出国</div>
</div>

<script src="js/xuanxiangka.js"></script>

</body>

</html>

------------------------------------------javascript代码 ---------------------------------------------------

//window.onload 以后记住，都把它添上吧，有备无患

window.onload = function() {
　　var oDiv = document.getElementById('div1');　　　　　　　　//要操作什么量，就把这些都先声明了　
　　var oBtn = oDiv.getElementsByTagName('input');
　　var aDiv = oDiv.getElementsByTagName('div');
　　for(var i=0; i<oBtn.length; i++) {　　　　　　　　　　　　　  //for循环，具体操作什么看循环中间的值，oBtn所以是操作4个按钮
　　　　oBtn[i].index = i;　　　　　　　　　　　　　　　　　　　　//赋每个按钮的属性（这里的属性是自定义属性）的值为i
　　　　oBtn[i].onclick = function() {　　　　　　　　　　　　　　//对每个按钮添加一个点击的事件
　　　　　　for(var i=0; i<oBtn.length; i++) {　　　　　　　　　 //继续用for循环，上一个是点击的for循环，这个循环用来操作点击后的后续事件
　　　　　　　　oBtn[i].className = '';　　　　　　　　　　　　   //让每个按钮的class名为空
　　　　　　　　aDiv[i].style.display = 'none'; 　　　　　　　　　 //让每个div的style样式的display为none;
　　　　　　}
　　　　this.className = 'active'; 　　　　　　　　　　　　　　　 //当前点击（对应onclick）对象的class名为 active
　　　　aDiv[this.index].style.display = 'block';　　　　　　　　　//aDiv（按钮下的div） this.index（赋了i的，就是说当前点击按钮对应的div） 的样式display为none
　　　　}
　　}
}

总结下  今天学到的。 做这样一个选项卡，总的思路就是，

先让所有的都隐藏，再让当前的显示出来~~~~

明天一练，坚持学习， 勤于思考，让自己有所进步和收获~加油

JS入门学习，写一个简单的选项卡的更多相关文章

  1. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  2. 使用 js，自己写一个简单的滚动条

    当我们给元素加上 overflow: auto;  的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 ...

  3. 第一个Three.js程序——动手写一个简单的场景

    三维场景基本要素: 步骤: 代码: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. js eval函数写一个简单的计算器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 原生js 基于canvas写一个简单的前端 截图工具

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  7. laravel学习：php写一个简单的ioc服务管理容器

    php写一个简单的ioc服务管理容器 原创: 陈晨 CoderStory 2018-01-14 最近学习laravel框架,了解到laravel核心是一个大容器,这个容器负责几乎所有服务组件的实例化以 ...

  8. （原创）如何使用boost.asio写一个简单的通信程序（一）

    boost.asio相信很多人听说过,作为一个跨平台的通信库,它的性能是很出色的,然而它却谈不上好用,里面有很多地方稍不注意就会出错,要正确的用好asio还是需要花一番精力去学习和实践的,本文将通过介 ...

  9. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

随机推荐

  1. 【精粹系列】PHP精粹

    本文地址 分享提纲: 1. 概述 2. 精粹内容 2.1 语言结构 2.2 大小写问题 2.3 变量函数 2.4 常量相关函数   2.5 字符串的使用 2.6 函数 2.7 数据库操作 2.8 自动 ...

  2. 瞄准SMART目标

    瞄准SMART目标 SMART代表具体的/可度量的/可实现的/相关的和时间可控的. 1.具体的  (一个目标任务应该是具体的/事物的具体化) 2.可度量的  (如何知道你何时完成?确贴的数字,度量具体 ...

  3. Windows8.1下安装NoSQL-- mongodb安装使用

    1. 官方下载monodb:http://www.mongodb.org/downloads 现在最新版本3.0 2. 以下载Windows 64-bit为例官方最新版的没有分开, 32位和64位是应 ...

  4. iOS UIPageViewController

    UIPageViewController是App中常用的控制器.它提供了一种分页效果来显示其childController的View.用户可以通过手势像翻书一样切换页面.切换页面时看起来是连续的,但静 ...

  5. Mac安装mysql遇到的坑

    使用XMPP前安装了mysql,小白遇到好多坑,不要见怪 mysql官网下载,选择Community中扩展名为dmg的文件 安装完成后要记住密码,重要的事情只说一遍,对了,安装时也没有偏好设置和自启动 ...

  6. CSS3-02 样式 1

    概述 上一篇博客中,概述了如何在 HTML 文档中使用 CSS,以及如何选择 HTML 元素,并且在文档的最后以表格的形式给出了 CSS 中所有的属性.在接下来的这篇博客中,将阐述主要 HTML 元素 ...

  7. Xcode出现（ linker command failed with exit code 1）错误总结

    这种问题,通常出现在添加第三方库文件或者多人开发时. 这种问题一般是找不到文件而导致的链接错误. 我们可以从如下几个方面着手排查. 先可以再试试一下几个方法:  1,看看是不是有新添加的文件跟之前文件 ...

  8. [转]HDFS中JAVA API的使用

    HDFS是一个分布式文件系统,既然是文件系统,就可以对其文件进行操作,比如说新建文件.删除文件.读取文件内容等操作.下面记录一下使用JAVA API对HDFS中的文件进行操作的过程. 对分HDFS中的 ...

  9. IIS7如何部署asp.net网站

      第一步:发布网站 右键asp.net web项目,选择发布, 然后新建配置文件名称并选择 "文件系统" 发布方法. 目标位置选择本地新建的文件夹如: IISWebSite 第二 ...

  10. ORACLE数据库SQL语句的执行过程

    SQL语句在数据库中处理过程是怎样的呢?执行顺序呢?在回答这个问题前,我们先来回顾一下:在ORACLE数据库系统架构下,SQL语句由用户进程产生,然后传到相对应的服务端进程,之后由服务器进程执行该SQ ...