最近重新从最基础学习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. 数组栈（ArrayStack）

    栈   栈是一种线性结构,相比与数组,栈对应的操作时数组的子集,只能从一端添加元素,也只能从一端取出元素,是一种 后进先出(Last In First Ou,LIFO) 的数据结构. push pop ...

  2. 白话分解入门操作系统到 Java

    一.完成一个任务需要什么? 时间 + 资源 + 处理能力 时间就是时间. 资源就是资源. 处理能力就是能够利用时间和资源完成任务的主体. 二.关于操作系统 处理能力就是cpu. 资源就是存储. 时间就 ...

  3. #树形dp，直径#51nod 1812 树的双直径

    题目 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点), 使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有1个点则链长视为0). \(n\leq 4*1 ...

  4. #分治，决策单调性dp#CF868F Yet Another Minimization Problem

    题目 给定一个序列 \(a\),要把它分成 \(k\) 个子段.(\(n\leq 10^5,k\leq 20\)) 每个子段的费用是其中相同元素的对数.求所有子段的费用之和的最小值. 分析 有一个很明 ...

  5. #博弈论#HDU 1847 Good Luck in CET-4 Everybody!

    题目 有\(n\)个石子,每次只能取2的自然数幂个, 取完石子的人获胜,问先手是否必胜 分析 如果不是3的倍数,那么取完一次一定能剩下3的倍数个, 反之亦然,那么3的倍数为必败状态 代码 #inclu ...

  6. 基于ArkUI框架开发——图片模糊处理的实现

     原文:https://mp.weixin.qq.com/s/vwXVj5vmAxDRG_jTk_8hPA,点击链接查看更多技术内容. 现在市面上有很多APP,都或多或少对图片有模糊上的设计,所以,图 ...

  7. 深入了解图片Base64编码

    title: 深入了解图片Base64编码 date: 2024/4/8 10:03:22 updated: 2024/4/8 10:03:22 tags: Base64编码 图片转换 HTTP请求 ...

  8. Win7 局域网服务器 - FTP 服务器搭建指南

    1. 打开 "开始" 菜单,找到控制面板 2. 选择 "程序" 3. 选择 "打开或关闭 Windows 功能" 4. 选择 "I ...

  9. 美团二面：如何保证Redis与Mysql双写一致性？连续两个面试问到了！

    引言 Redis作为一款高效的内存数据存储系统,凭借其优异的读写性能和丰富的数据结构支持,被广泛应用于缓存层以提升整个系统的响应速度和吞吐量.尤其是在与关系型数据库(如MySQL.PostgreSQL ...

  10. Effective Python：第2条　遵循PEP 8风格指南

    PEP8文档:https://peps.python.org/pep-0008/ 与空白有关的建议: 用空格(space)表示缩进,而不要用制表符(tab). 和语法相关的每一层缩进都用4个空格表示. ...