JS面向对象案例（1）-Tab栏切换

最新推荐文章于 2024-05-17 03:16:20 发布
原创 最新推荐文章于 2024-05-17 03:16:20 发布 · 793 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript
本文介绍了一个Tab栏功能的实现方案，包括切换、添加、删除和编辑等操作，并提供了详细的JavaScript代码示例。

功能需求实现

  1. 点击tab栏，可以切换标签页
  2. 点击+号，可以添加tab栏和内容项
  3. 点击x号，可以删除当前的tab项和内容项
  4. 双击tab项文字或者内容项文字，可以修改里面的文字内容

 抽象对象：Tab对象

  1. 该对象具有切换功能
  2. 该对象具有添加功能
  3. 该对象具有删除功能
  4. 该对象具有修改功能shoxain
class Tab {
    constructor() {

    }
    //1.切换功能
    toggleTab() {}
    //2.添加功能
    addTab() {}
    // 3.删除功能
    removeTab() {}
    // 4.修改功能
    editTab() {}
}
new Tab('#tab');

初始化对象 首先初始化 给相关元素绑定事件

class Tab {
    constructor(id) {
        //获取元素
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.init();
    }
    // 初始化
    init(){
        // init 初始化操作让相关元素绑定事件
        for(var i =0;i<this.lis.length;i++){
            // 存的是小li的索引号
            this.lis[i].index = i;
            this.lis[i].onclick = function() {
                console.log(this.index);//测试一下看是不是绑定成功了
            }
        }
    }
    //1.切换功能
    toggleTab() {}
    //2.添加功能
    addTab() {}
    // 3.删除功能
    removeTab() {}
    // 4.修改功能
    editTab() {}
}
new Tab('#tab');

 1.切换功能模块

var that;
class Tab {
    constructor(id) {
        //获取元素
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.init();
        that = this;
    }
    // 初始化
    init(){
        // init 初始化操作让相关元素绑定事件
        for(var i =0;i<this.lis.length;i++){
            // 存的是小li的索引号
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
        }
    }
    //1.切换功能
    toggleTab() {
        // ！！！！！一定注意this的指向问题
        // console.log(this.index);
        // 如果必须要清除所有样式 呢么必须使用最大的对象 也就是constructor里面的对象this
        that.clearClass();
        this.className = 'liactive';
        // 必须用constrcutor 所以用that变量来使用另一个this this指向的lis[i]里面没有sections
        that.sections[this.index].className = 'conactive';
    }
    clearClass() {
        for(var i = 0;i<this.lis.length;i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    //2.添加功能
    addTab() {}
    // 3.删除功能
    removeTab() {}
    // 4.修改功能
    editTab() {}
}
new Tab('#tab');

2.添加功能模块

思路理解：

  1. 点击+号，可以添加tab栏和内容项
  2. 第一步 必须创建新的选项卡li和新的内容section
  3. 第二步 把创建的两个元素追加到对应的父元素里面去了

补充知识点：insertAdjacentHTML()

作用：

方法将指定的文本解析为 Element 元素，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快。 

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML

基础语法：

element.insertAdjacentHTML(position, text);

var that;
class Tab {
    constructor(id) {
        that = this;
        //获取元素
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');
        // li的父元素
        // css3选择器
        this.ul = this.main.querySelector('.fisrstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon');
        this.init();
    }
    // 获取所有的li和section
    updateNode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
    }
    // 初始化
    init(){
        this.updateNode();
        this.add.onclick = this.addTab;
        // init 初始化操作让相关元素绑定事件
        for(var i =0;i<this.lis.length;i++){
            // 存的是小li的索引号
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
        }
    }
    //1.切换功能
    toggleTab() {
        // ！！！！！一定注意this的指向问题
        // console.log(this.index);
        // 如果必须要清除所有样式 呢么必须使用最大的对象 也就是constructor里面的对象this
        that.clearClass();
        this.className = 'liactive';
        // 必须用constrcutor 所以用that变量来使用另一个this this指向的lis[i]里面没有sections
        that.sections[this.index].className = 'conactive';
    }
    clearClass() {
        for(var i = 0;i<this.lis.length;i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    //2.添加功能
    addTab() {
        that.clearClass();
        var random = Math.random();
        // alert(11); 测试用例
        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
        var section = '<section class="conactive">测试1'+random+'</section>';
        that.ul.insertAdjacentHTML('beforeend',li);
        that.fsection.insertAdjacentHTML('beforeend',section);
        that.init();
    }
    // 3.删除功能
    removeTab() {}
    // 4.修改功能
    editTab() {}
}
new Tab('#tab');

3.删除功能模块

!!!y要注意元素的值是有变化的 所以必须实时更新数据

补充知识

remove()方法：Element.remove() 方法，把对象从它所属的 DOM 树中删除。

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/remove

 语法使用：

node.remove();
var that;
class Tab {
    constructor(id) {
        that = this;
        //获取元素
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');
        // li的父元素
        // css3选择器
        this.ul = this.main.querySelector('.fisrstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon');
        this.init();
    }
    // 获取所有的li和section
    updateNode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.icon-guanbi');
    }
    // 初始化
    init(){
        this.updateNode();
        this.add.onclick = this.addTab;
        // init 初始化操作让相关元素绑定事件
        for(var i =0;i<this.lis.length;i++){
            // 存的是小li的索引号
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.remove[i].onclick = this.removeTab;
        }
    }
    //1.切换功能
    toggleTab() {
        // ！！！！！一定注意this的指向问题
        // console.log(this.index);
        // 如果必须要清除所有样式 呢么必须使用最大的对象 也就是constructor里面的对象this
        that.clearClass();
        this.className = 'liactive';
        // 必须用constrcutor 所以用that变量来使用另一个this this指向的lis[i]里面没有sections
        that.sections[this.index].className = 'conactive';
    }
    clearClass() {
        for(var i = 0;i<this.lis.length;i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    //2.添加功能
    addTab() {
        that.clearClass();
        var random = Math.random();
        // alert(11); 测试用例
        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
        var section = '<section class="conactive">测试1'+random+'</section>';
        that.ul.insertAdjacentHTML('beforeend',li);
        that.fsection.insertAdjacentHTML('beforeend',section);
        that.init();
    }
    // 3.删除功能
    removeTab(e) {
        // 消除冒泡现象 防止触发li的点击事件
        e.stopPropagation();
        var index  = this.parentNode.index;
        console.log(index);
        // Element.remove() 方法，把对象从它所属的 DOM 树中删除。
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        //如果有选定状态了 呢么就不需要调用下面的点击事件  直接返回就好了
        if(document.querySelector('.liactive')) return;
        // 当我们删除了选定状态的li的时候 让他的前一个li赋予选定状态
        index--;
        //手动调用点击事件 不需要鼠标来触发
        //前面为真才触发
        that.lis[index]&&that.lis[index].click();
    }
    // 4.修改功能
    editTab() {}
}
new Tab('#tab');

 4.编辑功能

 核心思路：双击文字的时候 在里面生成一个文本框 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可。

var that;
class Tab {
    constructor(id) {
        that = this;
        //获取元素
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');
        // li的父元素
        // css3选择器
        this.ul = this.main.querySelector('.fisrstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon');
        this.init();
    }
    // 获取所有的li和section
    updateNode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.icon-guanbi');
        this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
    }
    // 初始化
    init(){
        this.updateNode();
        this.add.onclick = this.addTab;
        // init 初始化操作让相关元素绑定事件
        for(var i =0;i<this.lis.length;i++){
            // 存的是小li的索引号
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.remove[i].onclick = this.removeTab;
            // 鼠标双击事件
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }
    }
    //1.切换功能
    toggleTab() {
        // ！！！！！一定注意this的指向问题
        // console.log(this.index);
        // 如果必须要清除所有样式 呢么必须使用最大的对象 也就是constructor里面的对象this
        that.clearClass();
        this.className = 'liactive';
        // 必须用constrcutor 所以用that变量来使用另一个this this指向的lis[i]里面没有sections
        that.sections[this.index].className = 'conactive';
    }
    clearClass() {
        for(var i = 0;i<this.lis.length;i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    //2.添加功能
    addTab() {
        that.clearClass();
        var random = Math.random();
        // alert(11); 测试用例
        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
        var section = '<section class="conactive">测试1'+random+'</section>';
        that.ul.insertAdjacentHTML('beforeend',li);
        that.fsection.insertAdjacentHTML('beforeend',section);
        that.init();
    }
    // 3.删除功能
    removeTab(e) {
        // 消除冒泡现象 防止触发li的点击事件
        e.stopPropagation();
        var index  = this.parentNode.index;
        console.log(index);
        // Element.remove() 方法，把对象从它所属的 DOM 树中删除。
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        //如果有选定状态了 呢么就不需要调用下面的点击事件  直接返回就好了
        if(document.querySelector('.liactive')) return;
        // 当我们删除了选定状态的li的时候 让他的前一个li赋予选定状态
        index--;
        //手动调用点击事件 不需要鼠标来触发
        //前面为真才触发
        that.lis[index]&&that.lis[index].click();
    }
    // 4.修改功能
    editTab() {
        // 把span里面原先的文字内容赋值给一个str变量
        var str = this.innerHTML;
        // 双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        // alert(11);
        this.innerHTML = '<input type="text"/>'
        var input = this.children[0];
        input.value = str;
        // 文本框里的文字处于选定状态
        input.select();
        // 当我们离开文本框 把值给span
        // onblur失去焦点事件
        input.onblur = function() {
            this.parentNode.innerHTML = this.value;
        }
        //按下回车也可以把文本框里面的值给span
        input.onkeyup = function(e) {
            if(e.keyCode === 13){
                this.blur();
            }
        }
    }
}
new Tab('#tab');

注：案例所需要的html和css 

链接：https://pan.baidu.com/s/1A4LmUbFEhHT6lYVrw00Zxg?pwd=1234 

每天一个自我思考：面向对象和面向过程的区别是什么？评论区告诉我！！！！  

 

下期重磅预告：js原型链 构造函数.........................

js基于面向对象实现网页TAB选项卡菜单效果代码
10-23
主要介绍了js基于面向对象实现网页TAB选项卡菜单效果代码,实例演示了鼠标滑过即点击两种方式实现tab选项卡切换功能,涉及JavaScript鼠标事件控制页面元素属性变换的功能,需要的朋友可以参考下
js的高级笔记1:面向过程、面向对象、对象、类、添加属性和方法、类的继承、面向对象的tab栏切换案例
小黄呀呀呀的博客
10-03 215
1.面向过程与面向对象 1.1面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 1.2面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 1.3面向过程与面向对象对比 面向过程 面向对象 优点 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。 易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于
使用javascript 点击tab栏切换事件代码记录
q1ngqingsky的博客
11-27 1092
1. javascript 点击tab栏动态切换内容，并添加active。2. javascript 点击左右图标可以向左或者向右移动元素。第2点功能，改变ul的style，tanlateX 移动。
tab栏切换+全选反选
weixin_71275195的博客
08-22 175
【代码】tab栏切换+全选反选。
JS基础案例-tab栏切换（附详细代码）
qq_36507046的博客
07-11 4459
今天做了一个tab栏切换案例，在此将代码以及实现的过程记录下来，希望与小伙伴们一起交流学习。案例整体框架和效果图展示如下：
JavaScript之tab栏切换
weixin_44827643的博客
06-27 8210
本文主要介绍如何通过JS实现tab栏的切换效果，主要介绍三种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象1.利用自定义属性此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下： 2.利用let关键词此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下： 3.利用事件对象。前两种方法所做出来的tab栏是单一的，若要进行代码的复用，则会出现问题。利用事件对象
Web前端最全原生JS面向对象 Tab栏切换案例(1)，面试前端
2401_84617821的博客
05-17 882
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容测试1测试2测试3tab 内容测试1测试2测试3在这一节里我们要实现的效果：示例代码：var that;
前端实现tab栏切换，这么常见的案例你学会了吗？
热门推荐
阿牛的博客
03-31 1万+
tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
案例：tab 栏切换
icemwj的博客
09-21 1万+
案例：tab 栏切换（重点案例） 业务需求： 当鼠标点击上面相应的选项卡（tab），下面内容跟随变化。 案例分析： （1）Tab 栏切换有2个大的模块。 （2）上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） ，修改类名的方式。 （3）下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。 （4）规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。 （5）核心思路：给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从0开始编号。 （6
JavaScript简单的Tab栏导航——切换页面
YIC020920的博客
12-07 3180
这是昨天的一个课堂练习，简单展示一下！做的是一个简单的页面交互效果，呈现一种内嵌效果。效果图如下： 首先直接看一下它的js代码吧，在不一样的皮囊里藏着千篇一律的灵魂，主要是要体会从中的for循坏绑定点击事件。 布局和样式就直接放在一起了哈！ 感谢观看！
JavaScript对tab栏切换的常用几种方法
weixin_61683893的博客
04-11 4373
【代码】JavaScript对tab栏切换的常用几种方法。
tab 栏切换 js
weixin_52983838的博客
03-28 480
【代码】tab 栏切换 js。
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
lbcbjtlhmjq的博客
08-08 9369
给下图的静态页面添加tab栏切换效果。
通过JavaScript实现tab切换
weixin_54043141的博客
09-01 1989
在Web开发中，Tab切换是一个常见的功能，它允许用户在不同的页面部分之间进行切换。下面是一个使用JavaScript实现Tab切换的案例，我将详细描述如何实现这个功能。
(JavaScript)JS之Tab栏切换代码详解
2301_80460842的博客
03-21 1295
注意：有哪种浮动元素，才有相对应的clear操作，例如clear:right对float:left操作无效。(1) float方式：left right both inline-start inline-end。display:inline-block---行内元素，但可修改宽高。display:inline---行内元素，不换行，不可修改宽高。display:block---块级展示，会换行，可修改宽高。——用法：使元素下移，使浮动元素不在文本中出现，而在文本上方。
JS实现tab栏切换效果
loveforlongtime的博客
03-22 8093
js实现tab栏（前端必会）
JS实现Tab栏切换
Revin的博客
01-13 5088
记录使用JS实现Tab切换的效果 实现过程如下，首先利用排他思想选定模块选项卡，随后根据用户自定义标签再次利用排他思想显示内容模块。 具体代码如下 <head> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px;
JavaScript中的tab栏切换制作（排他思想）
qq_46617150的博客
05-22 1575
tab_list部分只有点击才会有红色背景样式，如果点击了规格与包装，那么商品介绍的样式会被清空。同时，tab_con部分的显示内容跟随tab_list部分的点击发生改变。5.当我们点击tab_list里面的某个li，让tab_con里面的对应序号内容显示，其余隐藏（排他思想）整个页面分为2个部分，tab_list部分（上半部分）和tab_con部分（下半部分）tab_list部分包含5个li，它们分别与tab_con部分的5个div盒子一一对应。3.规律：下面的模块显示内容和上面的选项卡一一对应相匹配。
js两种方式实现tab切换、冒泡原理、事件委托
littlehouse2023的博客
02-15 1116
js两种方式实现tab切换、冒泡原理、事件委托
JavaScript小案例——tab栏切换
weixin_54645034的博客
10-17 4449
本例利用排他思想和自定义属性等知识，灵活运用js技术，本例展示效果比较简单粗糙，仅供参考学习。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值