b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换

目录

重点原理/方法：

代码部分：

1.tab.js（全是重点）

2.index.html(辅助作用，用于查看结构，记得引入js和css文件)

3.style.css(辅助作用)

4.tab.css(辅助作用)

---

本文代码解决了原代码中的2个BUG

解决BUG1：如果直接删除第一个选项卡li,后面的选项卡不会被选中】

 //如果index=0,则index是false,不执行index--
 //如果index!=0,则执行index--
    index && index--

解决BUG2：如果input文本框为空，则无法再双击出现文本框】

修改为如果input文本框为空，则显示之前span的值

 input.onblur = function () {
      //如果input文本框没有内容，则仍显示之前的span的值
      if (this.value == '') {
        this.parentNode.innerHTML = str;//this指input文本框
      } else {
        this.parentNode.innerHTML = this.value;//this指input文本框
      }

    }

目标效果：

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

2.点击 × 可以删除当前的li选项卡和当前的section

（1）当删除的不是选中状态的li的时候,原来的选中状态li保持不变【相当于是如果有liactive这个类名，即有li被选中，则return退出程序】

（2）当删除了选中状态的这个li的时候, 让它的前一个li处于选定状态 【相当于让前一个li被点击】

3.双击选项卡li或者 section里面的文字,可以实现修改功能

（1）修改完内容如果按回车Enter也可以实现修改功能

4.被点击的li不显示下划线（添加类名liactive）

e.g.1初始状态

 e.g.2点击 + 可以实现添加新的选项卡li和内容section

 e.g.3在e.g.2基础上点击 × 可以删除测试1

  e.g.4在选中测试1状态下

 删除测试1

   e.g.5在e.g.4基础上，修改选项卡的测试2为体育，内容的测试2为体育内容

 

重点原理/方法：

 1.

VS   appendChild 不支持追加字符串的子元素 

 2.

3.

 4.

5.

 可直接复制版：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

6.

 7.

代码部分：

1.tab.js（全是重点）

var that;//全局变量
class Tab {
  constructor(id) {//此处的this指向 最大的盒子
    // 获取元素
    that = this;//用that获得此处的this的值，即 最大的盒子
    this.main = document.querySelector(id);//最大的盒子
    this.add = this.main.querySelector('.tabadd');//加号
    this.ul = this.main.querySelector('.fisrstnav ul:first-child');//li的父元素--类名是fisrstnav的第一个ul
    this.tabscon = this.main.querySelector('.tabscon');//section的父元素
    //下面new了Tab，会自动调用constructor函数，从而调用init初始化操作
    this.init();//页面刚加载，调用init（）方法 初始化操作
  }
  // init 初始化操作让相关的元素绑定事件
  init() {//此处的this指向 最大的盒子
    this.updateNode();//初始化时，调用updateNode函数，从而获取获取所有li和section
    //加号只有一个，所以写到for循环外面
    this.add.onclick = this.addTab;//点击加号后，调用下面addTab方法
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      //[toggleTab如果加（）则立即调用]
      //[此处需要点击后再调用]
      this.lis[i].onclick = this.toggleTab;
      //x号和li一一对应，所以写到li的for循环里面
      this.remove[i].onclick = this.removeTab;
      //给所有tab标签的文字内容span绑定ondblclick双击事件
      this.spans[i].ondblclick = this.editTab;
      //给所有section绑定ondblclick双击事件
      this.sections[i].ondblclick = this.editTab;
    }
  }
  //因为需要动态添加元素 需要重新获取对应的元素
  //获取所有li和section和x号（包括后来添加的）
  updateNode() {//此处的this指向 最大的盒子
    this.remove = this.main.querySelectorAll('.icon-guanbi');//x号
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');//tab标签的文字内容span
  }
  // 1. 切换功能
  toggleTab() {//此处的this指向 this.lis[i]被点击的li【在上面被this.lis[i]调用了】
    // console.log(this.index);这个this.index就是对应li的索引号
    that.clearClass();//最大的盒子调用clearClass方法【先干掉所有人】
    this.className = 'liactive';//被点到的li移除下面的横线
    that.sections[this.index].className = 'conactive';//被点到的li对应的内容section显示 
  }
  //【干掉所有人】清除所有li和section的类名
  clearClass() {//classClass方法是用that调用的，所以此处的this指向最大的盒子
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = '';//其他没被点到的li不移除下面的横线
      this.sections[i].className = '';//其他没被点到的li对应的内容section不显示
    }
  }
  // 2. 添加功能
  addTab() {//此处this指向 加号add【在上面被加号add调用了】
    that.clearClass();//添加元素前，先清除li和section上所有类名
    var random = Math.random();//声明一个随机数变量
    // (1) 创建li元素和section元素 
    var li = ' <li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">' + random + '</section>';
    // (2) 把这两个元素追加到对应的父元素里面
    that.ul.insertAdjacentHTML('beforeend', li);
    that.tabscon.insertAdjacentHTML('beforeend', section);
    that.init();//调用初始化，然后初始化里面调用updateNode函数，从而获取获取所有li和section
  }
  // 3. 删除功能
  removeTab(e) {//此处this指向 x号remove【在上面被x号remove调用了】
    e.stopPropagation();//设置阻止冒泡，使得点击X号的时候获取index,不会由于冒泡再获取其父级li的index 
    var index = this.parentNode.index;
    console.log(index);
    //根据索引号删除对应的li 和 section   remove()方法可以直接删除指定的元素
    that.lis[index].remove();
    that.sections[index].remove();
    that.init();//删除完毕再调用init初始化，重新获取一遍li和section的个数
    //(1)当删除的不是选中状态的li的时候,原来的选中状态li保持不变
    //【相当于是如果有liactive这个类名，即有li被选中，则return退出程序】
    if (document.querySelector('.liactive')) return;
    //(2)当删除了选中状态的这个li的时候, 让它的前一个li处于选定状态
    //【相当于让前一个li被点击，li被点击之后的事件之前都写过了】
    //如果index=0,则index是false,不执行index--
    //如果index!=0,则执行index--
    index && index--
    // click()手动调用点击事件，不需要鼠标触发
    //&&逻辑与 遇到false或等价于false就不执行之后的了
    //如果index--<0,但是由于索引号>=0,所以lis[-1]为false
    that.lis[index] && that.lis[index].click();
  }
  // 4. 修改功能
  editTab() {//此处this指向 tab标签的文字内容span【在上面被this.spans[i]调用了】
    //获取之前span的值
    var str = this.innerHTML;
    //双击禁止选择文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    this.innerHTML = '<input type="text"/>';
    //获取添加的input文本框
    var input = this.children[0];
    //让input文本框显示之前span初始的值
    input.value = str;
    //让文本框中文字处于选中状态
    input.select();
    //当离开文本框时（onblur失去焦点），把文本框里面的值给span 
    input.onblur = function () {
      //如果input文本框没有内容，则仍显示之前的span的值
      if (this.value == '') {
        this.parentNode.innerHTML = str;//this指input文本框
      } else {
        this.parentNode.innerHTML = this.value;//this指input文本框
      }

    }
    //按下回车也可以把文本框里面的值给span
    input.onkeyup = function (e) {
      if (e.key === 'Enter') {
        //手动调用blur失去焦点事件
        this.blur();//this指input文本框
      }
    }
  }
}
var tab = new Tab('#tab');

2.index.html(辅助作用，用于查看结构，记得引入js和css文件)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
</head>

<body>

    <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="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>

    <script src="js/tab.js"></script>
</body>

</html>

3.style.css(辅助作用)

@font-face {font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */
  src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),
  url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
  url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-guanbi:before {
  content: "\e676";
}

4.tab.css(辅助作用)

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}

main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #ffffff;
    z-index: 999;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}

.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}