最近重新从最基础学习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. #01背包#洛谷 4161 [SCOI2009]游戏

    题目 将 \(n\) 拆成若干个正整数的和, 问这些正整数的LCM有多少种 \(n\leq 10^3\) 分析 考虑这个\(LCM\)一定是1或者由若干个质数的指数幂相乘得到的, 那么可以设\(dp[ ...

  2. 体验Semantic Kernel图片内容识别

    前言 前几日在浏览devblogs.microsoft.com的时候,看到了一篇名为Image to Text with Semantic Kernel and HuggingFace的文章.这篇文章 ...

  3. Array and Set work process

    目录 Array work principle 分析Array操作步骤数 read find insert delete Set work principle 分析Set操作步骤数 read find ...

  4. HMS Core Insights第九期直播预告——手语服务，助力沟通无障碍

    [导读] 你知道吗?全球有超5%的人群正在遭受听力损失的折磨.这些听障群体由于沟通不便,在日常生活中面对着很多的困难与挑战,建立沟通无障碍环境的需求十分迫切.随着科技的发展,越来越多的人们享受到技术进 ...

  5. Ubuntu部署Django三：编写相关配置文件及启动服务

    1. uwsgi 1.1 项目结构如下,你要知道 uwsgi.ini 放在什么位置 projectName |-- app |-- projectName |-- -- wsgi.py |-- -- ...

  6. js小demo-迫使页面总是单独显示，不能被嵌入到iframe中

    有时候我们的网页会被别人内嵌别人的网页 iframe 中,我们只需要在页面中增加以下js就可以让我们的页面内容单独显示出来,不被嵌入到 iframe中 核心JS代码 <script> if ...

  7. Kalman滤波器的原理与实现

    Kalman滤波器的原理与实现 卡尔曼滤波器(Kalman Filter)是一个十分强大滤波器,虽然叫做滤波器,卡尔曼滤波器其实可以起到到两个作用,即预测与更新,这与我们在其运行时所关注的环节有关.当 ...

  8. CentOS添加一个新的硬盘分区到挂载的过程

    1.分区 分区工具fdisk用法介绍    fdisk命令参数介绍    p.打印分区表.    n.新建一个新分区.    d.删除一个分区.    q.退出不保存.    w.把分区写进分区表,保 ...

  9. vue2.0中watch用法

    watch:观测Vue实例上的数据变动,对应一个对象,键:就是需要监测的那个东西,值:1.可以是当键变化时执行的函数,有两个参数,第一个是变化前的值,第二个是变化后的值.2.可以是函数名,得用单引号包 ...

  10. 《c#高级编程》第3章C#3.0中的更改（五）——扩展方法

    C#扩展方法是一种语法,可以为已有的类添加新的实例方法,而无需修改原来的类定义.它的语法形式为: ```csharppublic static void MyExtensionMethod(this ...