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

    目录

    重点原理/方法：

    代码部分：

    1.tab.js（全是重点）

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

    3.style.css(辅助作用)

    4.tab.css(辅助作用)

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

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

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

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

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

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

    目标效果：

    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（全是重点）

    1. var that;//全局变量
    2. class Tab {
    3.   constructor(id) {//此处的this指向 最大的盒子
    4.     // 获取元素
    5.     that = this;//用that获得此处的this的值，即 最大的盒子
    6.     this.main = document.querySelector(id);//最大的盒子
    7.     this.add = this.main.querySelector('.tabadd');//加号
    8.     this.ul = this.main.querySelector('.fisrstnav ul:first-child');//li的父元素--类名是fisrstnav的第一个ul
    9.     this.tabscon = this.main.querySelector('.tabscon');//section的父元素
    10.     //下面new了Tab，会自动调用constructor函数，从而调用init初始化操作
    11.     this.init();//页面刚加载，调用init（）方法 初始化操作
    12.   }
    13.   // init 初始化操作让相关的元素绑定事件
    14.   init() {//此处的this指向 最大的盒子
    15.     this.updateNode();//初始化时，调用updateNode函数，从而获取获取所有li和section
    16.     //加号只有一个，所以写到for循环外面
    17.     this.add.onclick = this.addTab;//点击加号后，调用下面addTab方法
    18.     for (var i = 0; i < this.lis.length; i++) {
    19.       this.lis[i].index = i;
    20.       //[toggleTab如果加（）则立即调用]
    21.       //[此处需要点击后再调用]
    22.       this.lis[i].onclick = this.toggleTab;
    23.       //x号和li一一对应，所以写到li的for循环里面
    24.       this.remove[i].onclick = this.removeTab;
    25.       //给所有tab标签的文字内容span绑定ondblclick双击事件
    26.       this.spans[i].ondblclick = this.editTab;
    27.       //给所有section绑定ondblclick双击事件
    28.       this.sections[i].ondblclick = this.editTab;
    29.     }
    30.   }
    31.   //因为需要动态添加元素 需要重新获取对应的元素
    32.   //获取所有li和section和x号（包括后来添加的）
    33.   updateNode() {//此处的this指向 最大的盒子
    34.     this.remove = this.main.querySelectorAll('.icon-guanbi');//x号
    35.     this.lis = this.main.querySelectorAll('li');
    36.     this.sections = this.main.querySelectorAll('section');
    37.     this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');//tab标签的文字内容span
    38.   }
    39.   // 1. 切换功能
    40.   toggleTab() {//此处的this指向 this.lis[i]被点击的li【在上面被this.lis[i]调用了】
    41.     // console.log(this.index);这个this.index就是对应li的索引号
    42.     that.clearClass();//最大的盒子调用clearClass方法【先干掉所有人】
    43.     this.className = 'liactive';//被点到的li移除下面的横线
    44.     that.sections[this.index].className = 'conactive';//被点到的li对应的内容section显示 
    45.   }
    46.   //【干掉所有人】清除所有li和section的类名
    47.   clearClass() {//classClass方法是用that调用的，所以此处的this指向最大的盒子
    48.     for (var i = 0; i < this.lis.length; i++) {
    49.       this.lis[i].className = '';//其他没被点到的li不移除下面的横线
    50.       this.sections[i].className = '';//其他没被点到的li对应的内容section不显示
    51.     }
    52.   }
    53.   // 2. 添加功能
    54.   addTab() {//此处this指向 加号add【在上面被加号add调用了】
    55.     that.clearClass();//添加元素前，先清除li和section上所有类名
    56.     var random = Math.random();//声明一个随机数变量
    57.     // (1) 创建li元素和section元素 
    58.     var li = ' 
    59. 新选项卡
      60. ';
  • var section = '
    ' + random + '
    '    ;
  • // (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文本框
  • 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文件)

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>面向对象 Tab</title>
    9.     <link rel="stylesheet" href="./styles/tab.css">
    10.     <link rel="stylesheet" href="./styles/style.css">
    11. </head>
    12.  
    13. <body>
    14.  
    15.     <main>
    16.         <h4>
    17.             Js 面向对象 动态添加标签页
    18.         </h4>
    19.         <div class="tabsbox" id="tab">
    20.             <!-- tab 标签 -->
    21.             <nav class="fisrstnav">
    22.                 <ul>
    23.                     <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
    24.                     <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
    25.                     <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
    26.                 </ul>
    27.                 <div class="tabadd">
    28.                     <span>+</span>
    29.                 </div>
    30.             </nav>
    31.  
    32.             <!-- tab 内容 -->
    33.             <div class="tabscon">
    34.                 <section class="conactive">测试1</section>
    35.                 <section>测试2</section>
    36.                 <section>测试3</section>
    37.             </div>
    38.         </div>
    39.     </main>
    40.  
    41.     <script src="js/tab.js"></script>
    42. </body>
    43.  
    44. </html>

    3.style.css(辅助作用)

    1. @font-face {font-family: "iconfont";
    2.   src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */
    3.   src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */
    4.   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'),
    5.   url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
    6.   url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    7.   url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */
    8. }
    9.  
    10. .iconfont {
    11.   font-family: "iconfont" !important;
    12.   font-size: 16px;
    13.   font-style: normal;
    14.   -webkit-font-smoothing: antialiased;
    15.   -moz-osx-font-smoothing: grayscale;
    16. }
    17.  
    18. .icon-guanbi:before {
    19.   content: "\e676";
    20. }
    21.

    4.tab.css(辅助作用)

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4. }
    5.  
    6. ul li {
    7.     list-style: none;
    8. }
    9.  
    10. main {
    11.     width: 960px;
    12.     height: 500px;
    13.     border-radius: 10px;
    14.     margin: 50px auto;
    15. }
    16.  
    17. main h4 {
    18.     height: 100px;
    19.     line-height: 100px;
    20.     text-align: center;
    21. }
    22.  
    23. .tabsbox {
    24.     width: 900px;
    25.     margin: 0 auto;
    26.     height: 400px;
    27.     border: 1px solid lightsalmon;
    28.     position: relative;
    29. }
    30.  
    31. nav ul {
    32.     overflow: hidden;
    33. }
    34.  
    35. nav ul li {
    36.     float: left;
    37.     width: 100px;
    38.     height: 50px;
    39.     line-height: 50px;
    40.     text-align: center;
    41.     border-right: 1px solid #ccc;
    42.     position: relative;
    43. }
    44.  
    45. nav ul li.liactive {
    46.     border-bottom: 2px solid #ffffff;
    47.     z-index: 999;
    48. }
    49.  
    50. #tab input {
    51.     width: 80%;
    52.     height: 60%;
    53. }
    54.  
    55. nav ul li span:last-child {
    56.     position: absolute;
    57.     user-select: none;
    58.     font-size: 12px;
    59.     top: -18px;
    60.     right: 0;
    61.     display: inline-block;
    62.     height: 20px;
    63. }
    64.  
    65. .tabadd {
    66.     position: absolute;
    67.     /* width: 100px; */
    68.     top: 0;
    69.     right: 0;
    70. }
    71.  
    72. .tabadd span {
    73.     display: block;
    74.     width: 20px;
    75.     height: 20px;
    76.     line-height: 20px;
    77.     text-align: center;
    78.     border: 1px solid #ccc;
    79.     float: right;
    80.     margin: 10px;
    81.     user-select: none;
    82. }
    83.  
    84. .tabscon {
    85.     width: 100%;
    86.     height: 300px;
    87.     position: absolute;
    88.     padding: 30px;
    89.     top: 50px;
    90.     left: 0px;
    91.     box-sizing: border-box;
    92.     border-top: 1px solid #ccc;
    93. }
    94.  
    95. .tabscon section,
    96. .tabscon section.conactive {
    97.     display: none;
    98.     width: 100%;
    99.     height: 100%;
    100. }
    101.  
    102. .tabscon section.conactive {
    103.     display: block;
    104. }

  • 相关阅读:
    Qt day4
    算法: 对位置变换的字符串分组 49. Group Anagrams
    Linux字符设备驱动开发(一)
    20220804NOI模拟赛--考后总结
    HTML静态网页成品作业(HTML+CSS)——原神介绍设计制作(4个页面)
    Android13 实现有线网络和wifi共存
    智能钱包 AMA 第 8 期：探索进入市场的策略
    会员权益-需求调查：需要什么样的云服务器优惠
    Dart 语言入门
    【LeetCode 力扣】3.无重复字符的最长子串 Java实现 滑动窗口
  • 原文地址：https://blog.csdn.net/weixin_72322475/article/details/127435833