2024年原生JS面向对象 Tab栏切换案例，阿里后端面试题

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

3. 点击x号,可以删除当前的tab项和内容项

4. 双击tab项文字或者内容项文字，可以修改里面的文字内容.

3.抽象对象

---

抽象对象：Tab对象

• 该对象具有切换功能

• 该对象具有添加功能

• 该对象具有删除功能

• 该对象具有修改功能

4.切换功能实现

---

首先把大家可以先看看html结构，防止获取元素和类名的时候不知道获取的是什么：

Js 面向对象 动态添加标签页

• 测试1
• 测试2
• 测试3
• +

  测试1
  测试2
  测试3

  在这一节里我们要实现的效果：

  

  示例代码：

  var that;

  class tab{

  constructor(id){

  //获取元素

  that = this;

  this.main = document.querySelector(id);

  this.lis = this.main.querySelectorAll(‘li’);

  this.sections = this.main.querySelectorAll(‘section’);

  this.init();//自动调用init

  }

  init(){

  //init初始化操作让相关元素绑定事件

  for(let i = 0;i<this.lis.length;i++){

  this.lis[i].setAttribute(‘index’,i);//设置索引值

  this.lis[i].onclick = this.toggleTab;

  }

  }

  toggleTab() {

  //clearClass函数是类的公共函数，所有只能通过that调用

  that.clearClass();

  this.className = ‘liactive’;

  that.sections[this.getAttribute(‘index’)].className = ‘conactive’;

  }

  clearClass() {

  for(var i = 0;i<this.lis.length;i++) {

  this.lis[i].className = ‘’;

  this.sections[i].className = ‘’;

  }

  }

  }

  var newtab = new tab(‘.tabsbox’);

  在construcotr里我们要获取相关元素，这里一定要注意this的问题，必须要加this，因为this指向的就是实例化对象。在获取元素后调用init函数，init函数就是用来给元素绑定事件的，比如在页面刷新时tab栏就有了切换添加这些功能，所以要把init函数放在construcotr里。设置索引值是为了在点击tab栏的时候，底下的内容区域也可能够同样变化。

  注意：toggleTab()里调用clearClass时是that，而不是this。因为this指向的是调用函数的人，这里指的是li，因为在点击了li时才会调用切换函数。但是li里面没有clearClass方法，所以应该用that,that在这里指向的是实例化对象

  5.添加功能实现

  ---

  1.点击+可以实现添加新的选项卡和内容

  2.第一步:创建新的选项卡li和新的内容section

  3.第二步:把创建的两个元素追加到对应的父元素中.

  4.利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中

  这里简单介绍一下insertAdjacentHTML()的语法：

  position是相对于元素的位置,并且必须是以下字符串之一:

  ‘beforebegin’  元素自身的前面。

  ‘afterbegin’  插入元素内部的第一个子节点之前。

  ‘beforeend’  插入元素内部的最后-个子节点之后。

  ‘afterend’  元素自身的后面。

  text是要被解析为HTML或XML，并插入到DOM树中的字符串。

  首先我们在construcor里面获取元素：

  this.add = this.main.querySelector(‘.tabadd’);

  this.ul = this.main.querySelector(‘.fisrstnav ul’);

  this.fsection = this.main.querySelector(‘.tabscon’);

  然后在init初始化函数里给添加按钮绑定事件：

  this.add.onclick = this.addTab;

  最后创建添加函数addTab():

  addTab() {

  that.clearClass();

  var random = Math.random();

  var li = ‘

• 新选项卡
• ’;

  var section = ‘

  测试’+ random +‘
  ’;

  that.ul.insertAdjacentHTML(‘beforeend’,li);

  that.fsection.insertAdjacentHTML(‘beforeend’,section);

  }

  在添加函数的开头，要先调用clearClass清除原先的样式，让新添加的选项卡为选中状态，我们先看一下效果：

  

  为什么新添加的选项卡不能切换，并且以前的li和section没有清除掉类，这是为什么呢?

  因为这是我们后来添加的，我们在获取元素的时候是页面加载的时候，后来添加的也就没有被获取元素，所以也就没有绑定点击事件，就会有这些bug。

  所以我们应该在点击加号按钮之后，应该重新获取一下所有的li和section，那么我们新建一个更新函数updateNode()，把construcotr里面获取li和section的部分放进去，当我们每次点击添加按钮的时候都再获取一次所有li和section这样bug就解决了

  updateNode() {

  this.lis = this.main.querySelectorAll(‘li’);

  this.sections = this.main.querySelectorAll(‘section’);

  }

  并且在init开头加上这一句：

  this.updateNode();

  再在addTab最后加上这句：

  that.init();

  最后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-bQsKBhjS-1715631519792)]