JS面向对象动态添加标签页（梳理思路）

最新推荐文章于 2023-05-30 13:33:09 发布

是小赵哦

最新推荐文章于 2023-05-30 13:33:09 发布

阅读量1.4k

点赞数

分类专栏：自学web前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_46827043/article/details/124616553

版权

1.实现的页面效果

实现效果

2.JS相关代码实现

（1）实现功能要求

增删查改功能
双击改tab栏文字内容
用JS面向对象的思路

（2）实现步骤

1. 搭建最大的那个框架

先新建一个大类，里面要包含constructor这个构造函数（我们知道，在js当中这个函数是自动执行的）

 class Tab {
   
    constructor() {
   
        // 获取元素（获取到文档元素--最大的那个页面）
        this.main = document.querySelector(id);
    }}

2. 获取到页面之后，搭建大的框架

//增
addTab(){
   }
//删
removeTab(){
   }
//切换
toggleTab(){
   }
//改
editTab(){
   
这个里面包含了双击修改文字内容的功能
}

3. 添加内容和功能

<main>
      <h4>
          Js 面向对象 动态添加标签页
      </h4>
      <div class="tabsbox" id="tab">
          <!-- tab 标签 -->
          <nav class="fisrstnav">
              <ul>
                  <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                  <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                  <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
              </ul>
              <div class="tabadd">
                  <span>+</span>
              </div>
          </nav>

          <!-- tab 内容 -->
          <div class="tabscon">
              <section class