最近重新从最基础学习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. 不到2000字，轻松带你搞懂STM32中GPIO的8种工作模式

    大家好,我是知微! 学习过单片机的小伙伴对GPIO肯定不陌生,GPIO (general purpose input output)是通用输入输出端口的简称,通俗来讲就是单片机上的引脚. 在STM32 ...

  2. 为 Hugging Face 用户带来无服务器 GPU 推理服务

    今天,我们非常兴奋地宣布 部署到 Cloudflare Workers AI 功能正式上线,这是 Hugging Face Hub 平台上的一项新服务,它使得通过 Cloudflare 边缘数据中心部 ...

  3. redis 简单整理——redis 的哈希基本结构和命令[三]

    前言 简单介绍一下哈希基本结构和命令. 正文 什么是hash呢? hash也可以叫做字典.关联数组. 哈希类型是键本身又是一个键值对结构: value={{field1,value1},...{fie ...

  4. react native 使用typescript

    前言 TypeScript作为JavaScript的一个富类型扩展语言,深受代码风格严谨的前端开发者欢迎.但在react-native下,因为packager的配置困难,使用TypeScript一直是 ...

  5. python 多进程jieba分词，高效分词，multiprocessing

    自然语言任务经常使用jieba分词,数据量大时怎么加速,jieba分词不支持使用asyncio异步加速,使用multiprocessing还是可以的 import jieba import jieba ...

  6. 实战指南：使用 xUnit 和 ASP.NET Core 进行集成测试【完整教程】

    引言 集成测试可在包含应用支持基础结构(如数据库.文件系统和网络)的级别上确保应用组件功能正常. ASP.NET Core 通过将单元测试框架与测试 Web 主机和内存中测试服务器结合使用来支持集成测 ...

  7. Django框架——ajax补充、多对多三种创建、序列化组件、批量操作数据、分页器

    ajax补充说明 主要是针对回调函数args接收到的响应数据 1.后端request.is_ajax() 用于判断当前请求是否由ajax发出 2.后端返回的三板斧都会被args接收不再影响整个浏览器页 ...

  8. 力扣7(java)-整数反转（中等）

    题目: 给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果. 如果反转后整数超过 32 位的有符号整数的范围 [−231,  231 − 1] ,就返回 0. 假设环境不允许存 ...

  9. 【pytorch学习】之线性代数

    3 线性代数 3.1 标量 如果你曾经在餐厅支付餐费,那么应该已经知道一些基本的线性代数,比如在数字间相加或相乘.例如,北京的温度为52◦F(华氏度,除摄氏度外的另一种温度计量单位).严格来说,仅包含 ...

  10. SpringCloud 应用在 Kubernetes 上的最佳实践 —— 高可用（弹性伸缩）

    作者 | 三未 前言 弹性伸缩是一种为了满足业务需求.保证服务质量.平衡服务成本的重要应用管理策略.弹性伸缩让应用的部署规模能够根据实时的业务量产生动态调整,在业务高峰期扩大部署规模,保证服务不被业务 ...