• JavaScript面向对象动态添加标签页 （ES6）

    目录

    1、主要功能介绍：

    2、引入文件

    3、HTML代码和CSS样式

    4、Javascript代码

    1、主要功能介绍：

    将不同的功能抽离出来

    1、 创建对象具有切换选项卡的功能

    2、 创建对象具有添加选项卡的功能

    3、 创建对象具有删除选项卡的功能

    4、 创建对象具有修改选项卡内容的功能

    5、动态获取、绑定元素、渲染UI界面

    2、引入文件

    1.     <link rel="stylesheet" href="index.css">
    2.     <script src="index.js"></script>

    3、HTML代码和CSS样式

    主要学的是javascript的知识，所以这些不用做的太精细

    html代码：

    1. <body>
    2.     <main>
    3.         <h4>
    4.             JS面向对象动态添加标签页
    5.         </h4>
    6.         <div class="tabsbox">
    7.             <nav>
    8.                 <ul class="ul">
    9.                     <li class="bottom">
    10.                         <span>标签1</span>
    11.                         <span></span>
    12.  
    13.                     </li>
    14.                     <li>
    15.                         <span>标签2</span>
    16.                         <span></span>
    17.  
    18.                     </li>
    19.                     <li>
    20.                         <span>标签3</span>
    21.                         <span></span>
    22.                     </li>
    23.                     <div class="add"></div>
    24.                 </ul>
    25.             </nav>
    26.             <div class="tabscontent">
    27.                 <section class="block">标签内容1</section>
    28.                 <section>标签内容2</section>
    29.                 <section>标签内容3</section>
    30.             </div>
    31.         </div>
    32.     </main>
    33. </body>

    css代码：

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4.     box-sizing: border-box;
    5.     border: 0;
    6. }
    7.  
    8.  
    9. /* 引入字体图标 */
    10.  
    11. @font-face {
    12.     font-family: 'icomoon';
    13.     src: url('fonts/icomoon.eot?e8ckkr');
    14.     src: url('fonts/icomoon.eot?e8ckkr#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?e8ckkr') format('truetype'), url('fonts/icomoon.woff?e8ckkr') format('woff'), url('fonts/icomoon.svg?e8ckkr#icomoon') format('svg');
    15.     font-weight: normal;
    16.     font-style: normal;
    17.     font-display: block;
    18. }
    19.  
    20. li {
    21.     list-style: none;
    22. }
    23.  
    24. main {
    25.     margin: 0 auto;
    26.     width: 800px;
    27. }
    28.  
    29. main h4 {
    30.     line-height: 80px;
    31.     text-align: center;
    32.     height: 80px;
    33.     font-size: 25px;
    34. }
    35.  
    36. .tabsbox {
    37.     width: 100%;
    38.     height: 60px;
    39.     border: 1px solid #ccc;
    40. }
    41.  
    42. nav {
    43.     position: relative;
    44.     height: 60px;
    45. }
    46.  
    47. nav ul {
    48.     height: 100%;
    49. }
    50.  
    51. nav ul li {
    52.     position: relative;
    53.     float: left;
    54.     width: 100px;
    55.     height: 59px;
    56.     line-height: 60px;
    57.     text-align: center;
    58.     border-right: 1px solid #ccc;
    59.     border-bottom: 1px solid #ccc;
    60.     background-color: #fff;
    61. }
    62.  
    63. nav ul li input {
    64.     width: 90px;
    65.     height: 30px;
    66.     outline-color: rgb(181, 150, 179);
    67. }
    68.  
    69. nav ul li span:nth-child(2) {
    70.     line-height: 0;
    71.     position: absolute;
    72.     top: 8px;
    73.     right: 0;
    74.     font-size: 20px;
    75.     font-family: 'icomoon';
    76. }
    77.  
    78. .add {
    79.     text-align: center;
    80.     position: absolute;
    81.     line-height: 30px;
    82.     right: 10px;
    83.     top: 15px;
    84.     width: 30px;
    85.     height: 30px;
    86.     border: 1px solid #ccc;
    87.     font-family: 'icomoon';
    88. }
    89.  
    90. .tabscontent {
    91.     margin-top: -1px;
    92.     margin-left: -1px;
    93.     width: 800px;
    94.     height: 300px;
    95.     border: 1px solid #ccc;
    96.     border-top: 0px;
    97. }
    98.  
    99. section {
    100.     display: none;
    101.     text-align: left;
    102.     padding: 30px;
    103.     width: 800px;
    104.     height: 300px;
    105. }
    106.  
    107. section input {
    108.     width: 600px;
    109.     height: 200px;
    110.     outline-color: bisque;
    111. }
    112.  
    113. .block {
    114.     display: block;
    115. }
    116.  
    117. .bottom {
    118.     border-bottom: 0;
    119. }

    4、Javascript代码

    基本一句一行注释，注释界的天花板，有问题请在评论区留言

    1. document.addEventListener("DOMContentLoaded", function() {
    2.     var that;
    3.     class Tab {
    4.         constructor() {
    5.             that = this;
    6.             // 获取元素,获取的这些只能是之前的，动态添加的不能够获取到
    7.             this.main = document.querySelector("main");
    8.             this.add = this.main.querySelector(".add");
    9.             this.ul = this.main.querySelector(".ul");
    10.             this.tabscontent = this.main.querySelector(".tabscontent");
    11.             // 实例化对象后直接实现init()方法即可
    12.             this.init();
    13.         };
    14.         updateNode() {
    15.             this.lis = this.main.querySelectorAll("li");
    16.             this.sections = this.main.querySelectorAll("section");
    17.             // 获取删除按钮
    18.             this.errors = this.main.querySelectorAll("li span:nth-child(2)");
    19.             // 动态获取所有li里面的第一个span标签
    20.             this.span1s = this.main.querySelectorAll("li span:nth-child(1)");
    21.         }
    22.         init() {
    23.             // 初始化操作，让相关元素绑定事件   [指向constructor]
    24.             // 获取一下li和section，一定要放到前面，先获取元素才能绑定事件
    25.             // 直接把他放到这，重新获取一下li和section也为新的元素重新绑定一下
    26.             this.updateNode();
    27.             // 当点击添加按钮的时候，执行添加方法
    28.             that.add.onclick = that.addTab;
    29.             for (var i = 0; i < this.lis.length; i++) {
    30.                 // 给 所有的li的index属性赋值
    31.                 this.lis[i].index = i;
    32.                 // 点击之后执行toggleTab这个方法
    33.                 this.lis[i].onclick = this.toggleTab;
    34.                 // 输出的this指向的是 被点击的那个li的index属性
    35.                 // console.log(this.index);
    36.                 // 循环遍历，当点击删除按钮时,当前被点击按钮的操作
    37.                 this.errors[i].onclick = this.removeTab;
    38.                 // 当双击被选中的li里面第一个span的时候，执行edit方法
    39.                 this.span1s[i].ondblclick = this.editTab;
    40.                 // section也绑定双击事件
    41.                 this.sections[i].ondblclick = this.editTab;
    42.                 //为啥在这地方输出的i是3
    43.             }
    44.         };
    45.         clearClass() {
    46.             // for循环排他的思想
    47.             // 让他的所有的类先清除掉
    48.             for (var i = 0; i < this.lis.length; i++) {
    49.                 // 把li的所有li的类名全去掉，不用管指向谁直接
    50.                 that.lis[i].className = '';
    51.                 that.sections[i].className = '';
    52.             }
    53.         };
    54.         // 1、切换功能
    55.         toggleTab() {
    56.             // 指向被点击的哪个li
    57.             // 切换之前，先调用clearClass()，把所有的类先清除，再添加,
    58.             // 用that，toggleTab()指向的是li
    59.             that.clearClass();
    60.             // 点击哪个li就给那个li添加bottom类，让他的下边框去掉
    61.             this.className = 'bottom';
    62.             that.sections[this.index].className = 'block';
    63.         };
    64.         // 2、添加功能
    65.         addTab() {
    66.             // 指向点击的添加按钮
    67.             // 在添加元素前，清除一下所有的类名，让刚添加的元素处于选中状态
    68.             that.clearClass();
    69.             // 创建一个li元素
    70.             var li = '
    71. 测试' + (that.lis.length + 1) + '
      72. ';
  • var section = '
    模块内容' + (that.lis.length + 1) + '
    '    ;
  • // 把li追加到ul里面
  • that.ul.insertAdjacentHTML("beforeend", li);
  • that.tabscontent.insertAdjacentHTML("beforeend", section);
  • // 点击添加按钮后再重新获取一下li和section和绑定元素
  • that.init();
  • };
  • // 3删除功能功能
  • removeTab(e) {
  • // [指向被点击的删除按钮]
  • // 阻止冒泡事件
  • e.stopPropagation();
  • // 获取被点击的li的索引号
  • var index = this.parentNode.index;
  • that.lis[index].remove();
  • that.sections[index].remove();
  • // 点击添加按钮后再重新获取一下li和section和绑定元素
  • that.init();
  • // 当我们删除之后，还有li处于选中状态（也就是说删除的不是处于选中状态的）
  • // 就直接return，不再进行前一个选中操作，保持原来的选中状态不变
  • // 当我们删除选中状态的li后，让他的前一个处于选中状态
  • index--;
  • // 手动调用一下点击事件
  • // 如果点击的这个元素前面为空，index值不存在就不执行点击事件，否则会报错
  • that.lis[index] && that.lis[index].click();
  • };
  • // 4、修改功能
  • editTab() {
  • // [指向被双击的那个span标签和section标签]
  • // 禁止双击选中文字
  • window.getSelection ? window.getSelection().removeAllRanges() : document.getSelection.empty();
  • // 先获取第一个span的内容
  • var content = this.innerHTML;
  • // 生成表单 成为span的孩子啦
  • this.innerHTML = '+ content + '">';
  • // 让里面的文字处于选中状态
  • var input = this.children[0];
  • input.select();
  • // 如果失去焦点的时候，把input里面的值再传给span盒子
  • input.onblur = function() {
  • // 这里的this指向input
  • this.parentNode.innerHTML = this.value;
  • }
  • input.onkeyup = function(e) {
  • if (e.keyCode == 13) {
  • this.blur();
  • }
  • }
  • };
  • }
  • var tab = new Tab();
  • })

    • 求学于黑马，欢迎在黑马学习~

  • 相关阅读:
    LeetCode题解—15.三数之和
    autopoi-web 导入 excel 解决二级表头重复问题
    [13] CUDA_Opencv联合编译过程
    JDBC快速入门
    【智能合约】合约转账
    pdf也可以制作成可翻页的电子书吗？
    【LeetCode】【剑指offer】【数组中数字出现的次数（二）】
    dubboMain启动报错 appletviewer ＜options＞ url
    数据挖掘（六） 层次聚类
    PHP自己的框架留言板功能实现
  • 原文地址：https://blog.csdn.net/m0_45142186/article/details/126911536