最近重新从最基础学习JavaScript，如同盖房，先要打好基础，一砖一瓦都很重要。

下面我来嘚吧几句，附上从书上学到的实例与效果。

JS可以用面向过程去写，也可以使用面向对象。面向对象会使一段JS代码更好进行复用，封装与继承。
已下我会写出2种实现tab切换的方法--面向过程与面向对象

面向过程如同你写一篇文章，从头写到尾，不用介绍人物，场景，按照顺序一路写下去即可。

1.tab切换效果图


代码实现：

<!DOCTYPE html>

<html>

<head>

    <title>选项卡</title>

    <style type="text/css">

        input{background: white;}

        .active{background: yellow;}

        div{width: 200px;height: 200px;background: #ccc;display: none;}

    </style>

    <script type="text/javascript">

        window.onload=function(){

            var aBtn=document.getElementsByTagName('input');//getElementByTagName 获取所有的input

            var aDiv=document.getElementsByTagName('div');//getElementByTagName 获取所有的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=""; //for循环设置其他按钮的Class为空
aDiv[i].style.display="none";//for循环设置其他div隐藏
 } 
// alert('点击了第'+this.index+'个按钮'); 
this.className="active";//设置当前按钮的Class为active
 aDiv[this.index].style.display="block";//设置当前div显示
 }; 
}
 } 

</script> 
</head> 
<body> 
<input class="active" type="button" value="1"/>
 <input type="button" value="2"/> 
<input type="button" value="3"/>
 <div style="display: block">111</div>
 <div>222</div>
 <div>333</div> 
</body> 
</html>

2.面向对象的tab切换

效果图一样，但代码实现会有差别
代码实现：

<!DOCTYPE html>

<html>

<head>

    <title>选项卡</title>

    <style type="text/css">

        input{background: white;}

        .active{background: yellow;}

        #div1 div{width: 200px;height: 200px;background: #ccc;display: none;}

        #div1{display: block;}

    </style>

    <script type="text/javascript">

        // var aBtn=null;

        // var aDiv=null;

window.onload=function(){

    var oTab=new TabSwitch('div1');//实例化一个对象

}

    function TabSwitch(id){

             var oDiv=document.getElementById(id);

             this.aBtn=oDiv.getElementsByTagName('input');

            this.aDiv=oDiv.getElementsByTagName('div');

            var _this=this;//用_this存取对象，对象具有标签切换的功能

            for(var i=0;i<this.aBtn.length;i++){

                this.aBtn[i].index=i;

                this.aBtn[i].onclick=function()

                {

                    _this.tab(this);

                };

            }

        };

        TabSwitch.prototype.tab=function(oBtn){

                    for (var i = 0;i<this.aBtn.length;i++) {

                        this.aBtn[i].className="";

                        this.aDiv[i].style.display="none";

                    }

                    // alert('点击了第'+this.index+'个按钮');

                oBtn.className="active";

                this.aDiv[oBtn.index].style.display="block";

                };

    </script>

</head>

<body>

<div id="div1">

<input class="active" type="button" value="1"/>

<input type="button" value="2"/>

<input type="button" value="3"/>

<div style="display: block">111</div>

<div>222</div>

<div>333</div>

</div>

</body>

</html>

面向对象的好处是：如果想多次使用该JS方法，只需要实例化多个对象即可。
var oTab=new TabSwitch('div1');//实例化一个对象

var oTab=new TabSwitch('div2');//实例化一个对象

纯JS制作选项卡--JavaScript实例集锦（初学）的更多相关文章

  1. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  2. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

  4. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  5. [前端 3]纯Js制作俄罗斯方块游戏

    导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在 哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...

  6. 纯js制作九宫格

    Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动,一定需要脱离标准文档流,所以我们给它使用绝对定位. 2.利 ...

  7. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  8. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

    整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...

  9. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)

    整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...

  10. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

随机推荐

  1. 【WCH以太网接口系列芯片】CH9121\20的使用和测试

    本篇文章将介绍沁恒微电子的以太网转接芯片CH9121(CH9120和CH9121使用上没有区别,注意配置工具不一样,可以在沁恒微电子官网自行下载测试),该芯片支持网口和串口相互透传,可以通过串口AT指 ...

  2. C++ 面试必备：常见 C++ 面试题汇总及详细解析

    C++作为一门重要的编程语言,其在面试中常常是热门的考察对象.本文将会介绍一些常见的C++面试题,帮助C++面试者避免很多不必要的困惑和迷惑.每个问题都有相对应的答案,以便各位同学快速查阅. C++和 ...

  3. SQL ALTER TABLE 语句- 灵活修改表结构和数据类型

    SQL ALTER TABLE 语句 SQL ALTER TABLE 语句用于在现有表中添加.删除或修改列,也可用于添加和删除各种约束. ALTER TABLE - 添加列 要在表中添加列,请使用以下 ...

  4. c# 托管和非托管资源-详解

    前言 引用:带你复习c# 托管和非托管资源_C#教程_脚本之家 (jb51.net) c# 托管和非托管比较重要,因为这涉及到资源的释放. 现在只要在计算机上运行的,无论玩出什么花来,整个什么概念,逃 ...

  5. WPF/MVVM模式入门教程（二）：实现INotifyPropertyChanged接口

    引用:https://www.cnblogs.com/flh1/p/12447188.html 1.创建NotifyPropertyChanged类 我们在common文件夹下创建一个名为Notify ...

  6. redis 简单整理——慢查询[八]

    前言 简单整理一下redis的慢查询. 正文 什么是慢查询呢? 一般存储系统就是系统在命令执行前后计算每条命令的执行时间,当超出预设阀值,就将这条命令的相关信息记录下来. 但是有人可能没有看到慢查询日 ...

  7. js 按照字母进行分组

    前言 js 按照字母进行分组的一个实例. 正文 var list = [ { 'name' : '张三', 'py' : 'zhnagsan' }, { 'name' : '李四', 'py' : ' ...

  8. 重新整理数据结构与算法（c#系列）—— 树的前中后序遍历查找[十七]

    前言 树的前中后序遍历 是根据前中后序的顺序来查找,找到了则弹出. 正文 节点模型: public class HeroNode { private int no; private string na ...

  9. ImportError: Cannot load backend 'TkAgg' which requires the 'tk' interactive framework, as 'headless' is currently running

    MMdetection多卡训练常遇到的两个错误,百度无果,没解决,去github里mmdetection的issue模块搜索了一下找到正解. 这里记录一下,方便后者. 1️⃣ ImportError: ...

  10. Django3.0连接数据库注意点

    需先在应用下的__Init__.py文件中配置 import pymysqlpymysql.version_info=(1, 3, 13, 'final', 0) # 3.0时需要pymysql.in ...