面向对象实例-实现Tab选项卡的增删改功能

最新推荐文章于 2023-05-25 23:51:52 发布

倔强的小绵羊

最新推荐文章于 2023-05-25 23:51:52 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/lhz_333/article/details/109690347

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

本文通过一个实例展示了如何利用JavaScript的面向对象思想来创建一个选项卡功能。代码包括HTML、CSS和JavaScript部分，实现了选项卡的切换、添加、删除以及编辑功能。在JavaScript中定义了一个Tab类，包含初始化、切换、添加、删除和编辑等方法，确保了选项卡的动态交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

今天主要就是使用面向对象的思想来简单实现下tab选项卡功能。

具体代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用类-编写选项卡实例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    ul li {
      list-style: none;
    }
    .tab {
      width: 100%;
      height: 500px;
      border: 1px solid #aaa;
    }
    .tab-top, .tab-list {
      display: flex;
      align-items: center;
      justify-content: start;
    }
    .tab-list li {
      position: relative;
      padding: 5px 30px;
      background-color: #aaa;
    }
    .tab-list li.active {
      background-color: white;
    }
    .tab-list li .remove{
      position: absolute;
      top: 5px;
      right: 5px;
      width: 16px;
      height: 16px;
      font-weight: normal;
      text-align: center;
      line-height: 16px;
      background-color: #ddd;
      border-radius: 50%;
      cursor: pointer;
    }
    .tab-add {
      padding: 5px 30px;
      cursor: pointer;
    }
    .tab-content section{
      padding: 10px;
      height: 200px;
      display: none;
    }
    .tab-content section.active {
      display: block;
    }
  </style>
</head>
<body>
  <div id="tab">
    <div class="tab-top">
      <ul class="tab-list">
        <li>
          <span>语文</span>
          <b class="remove">x</b>
        </li>
        <li class="active">
          <span>数学</span>
          <b class="remove">x</b>
        </li>
        <li>
          <span>英语</span>
          <b class="remove">x</b>
        </li>
      </ul>
      <div class="tab-add">+</div>
    </div>
    <div class="tab-content">
      <section>语文内容</section>
      <section class="active">数学内容</section>
      <section>英语内容</section>
    </div>

  </div>

  <script>
    class Tab {
      constructor(mainId) {
      	// constructor 里面的this 指向的是 创建的实例对象
        this.mainTab = document.querySelector(`#${mainId}`)
        this.tabUl = this.mainTab.querySelector('.tab-list')
        this.addBtn = this.mainTab.querySelector('.tab-add')
        this.tabContent = this.mainTab.querySelector('.tab-content')
        this.init()
      }
      // 初始化
      init() {
        this.updateNode()
        this.addBtn.onclick = this.addTab.bind(this)
        for(let i=0; i<this.tabLis.length; i++) {
          this.tabLis[i].index = i
          this.tabLis[i].onclick = this.toggleTab.bind(this.tabLis[i], this)
          this.removeBtn[i].onclick = this.removeTab.bind(this.removeBtn[i], this)
          this.texts[i].ondblclick = this.editTab
          this.tabSections[i].ondblclick = this.editTab
        }
      }
      // 动态更新节点 新增和删除需要
      updateNode() {
        this.tabLis = this.mainTab.querySelectorAll('.tab-list li')
        this.texts = this.mainTab.querySelectorAll('.tab-list li span')
        this.tabSections = this.tabContent.querySelectorAll('section')
        this.removeBtn = this.mainTab.querySelectorAll('.tab-list li .remove')
      }
      // 切换
      toggleTab(_this) {
        _this.clearClassName()
        this.className = 'active'
        _this.tabSections[this.index].className = 'active'
      }
      // 清空选中状态
      clearClassName() {
        for(let i=0; i<this.tabLis.length; i++) {
          this.tabLis[i].className = ''
          this.tabSections[i].className = ''
        }
      }
      // 添加
      addTab() {
        this.clearClassName()
        let random = Math.random()
        let li = `<li class="active"><span>新选项卡</span><b class="remove">x</b></li>`
        let section = `<section class="active">新选项卡${random}内容</section>`
        this.tabUl.insertAdjacentHTML('beforeend', li)
        this.tabContent.insertAdjacentHTML('beforeend', section)
        this.init()
      }
      // 移除
      removeTab(_this, e) {
        // 阻止冒泡
        e.stopPropagation()
        let index = this.parentNode.index
        _this.tabLis[index].remove()
        _this.tabSections[index].remove()
        _this.init()
        if(_this.mainTab.querySelector('.active')) return
        index > 0 ? index-- : index
        _this.tabLis[index] && _this.tabLis[index].click()
      }
      // 编辑
      editTab() {
        let str = this.innerHTML
        // 双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = `<input type="text" />`
        let input = this.children[0]
        input.value = str
        // 选中文本框的值
        input.select()
        // 失去焦点的时候 将输入框的值给span
        input.onblur = function() {
          this.parentNode.innerHTML = this.value
        }
        input.onkeyup = function(e) {
          if(e.keyCode === 13) this.blur()
        }
      }
    }
	
	// 实例化对象
    let tab = new Tab('tab')
  </script>
</body>
</html>