最近重新从最基础学习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. 5W1H聊开源之Who/When/Where——谁在何时何地“发明”了开源？

    美国政治传播学家拉斯韦尔提出了5W传播模式,经过后人的不断运用和发展总结,形成了一套逐渐成熟的"5W1H"体系,即:对选定的项目.工序或操作,都要从原因(何因Why).对象(何事W ...

  2. #对偶图最短路，网络流#洛谷 4001 [ICPC-Beijing 2006]狼抓兔子

    题目 网格图最小割\((n,m\leq 1000)\) 分析 首先网络流可以过,但是由于无向图,所以残量网络容量也为\(w\),\(Dinic\)玄学AC,代码就不贴了 那有没有其它方法呢,网格图显然 ...

  3. OpenHarmony设备截屏的5种方式

      本文转载自<OpenHarmony设备截屏的5种方式 >,作者westinyang 目录 ● 方式1:系统控制中心 ● 方式2:OHScrcpy投屏工具 `推荐` ● 方式3:DevE ...

  4. BZOJ 4403序列统计

    假设存在一个满足条件的长度为i的不下降序列(显然是一定存在的)那么只需要从中选出i个数即可 (不必在意选出具体数的大小,可以把满足条件的序列写下来,选几个数感受一下). 但是$n \choose m ...

  5. CentOS编译安装Nginx1.5.2+PHP5.5.1+ MySQL 5.6.10

    CentOS编译安装Nginx1.5.2+PHP5.5.1+ MySQL 5.6.10 时间:2013-11-15 23:39 来源:blog.s135.com  作者:张宴的博客  举报  点击:1 ...

  6. canvas生成表单海报

    项目需要输入表单生成图片,可以使用下面方法生成海报,保存到手机,话不多说,上代码吧 HTML部分代码 <div class="dd"> <img src=&quo ...

  7. dojo\dart脚本编程语言

    Dojo是一个用于构建高效.可扩展的Web应用程序的开源JavaScript框架.它提供了一系列功能丰富的模块和组件,包括DOM操作.事件处理.异步编程.动画效果等.Dojo还具有强大的用户界面(UI ...

  8. 力扣138(java)- 复制带随机指针的链表（中等）

    题目: 给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节点. 构造这个链表的 深拷贝. 深拷贝应该正好由 n 个 全新 节点组成,其 ...

  9. 力扣388(java)-文件的最长绝对路径（中等）

    题目: 假设有一个同时存储文件和目录的文件系统.下图展示了文件系统的一个示例: 这里将 dir 作为根目录中的唯一目录.dir 包含两个子目录 subdir1 和 subdir2 .subdir1 包 ...

  10. 5款开源、美观、强大的WPF UI组件库

    前言 经常看到有小伙伴在DotNetGuide技术社区交流群里提问:WPF有什么好用或者好看的UI组件库?,今天大姚给大家分享5款开源.美观.强大.简单易用的WPF UI组件库. WPF介绍 WPF ...