欢迎光临
我的个人博客网站

原生js面对对象Tab栏

场景:选项页

原生js面对对象Tab栏

HTML:

<body>    <div id="center">     <h4>tab栏</h4>     <div class="tabsBox" id="tab">       <!-- tab标签 -->       <nav class="fisrstNav">         <ul>           <li class="liActive"><span>测试1</span><span class="icon"></span></li>           <li><span>测试2</span><span class="icon"></span></li>           <li><span>测试3</span><span class="icon"></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>   </div>      <script src="./index.js"></script> </body>

CSS:

#center{   position: fixed;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   margin: 0 auto;   .tabsBox{     width: 500px;     height: 300px;     border: 1px solid #000;     .fisrstNav{       position: relative;       display: flex;       height: 36px;       justify-content: space-between;       border-bottom: 1px solid #000;       ul{         display: flex;         list-style: none;         margin: 0;         padding: 0;         li{           position: relative;           height: 35px;           padding: 0 15px;           text-align: center;           line-height: 35px;           border-right: 1px solid #000;           overflow: hidden;           .icon{             position: absolute;             top: -8px;             right: -8px;             width: 18px;             height: 18px;             border-radius: 9px;             background-color: #000;             &::after{               position: absolute;               top: -7px;               right: 9px;               font-size: 6px;               content: 'x';               color: #fff;             }           }         }         .liActive{           color: red;         }       }       .tabadd{         position: absolute;         top: 50%;         transform: translate(0, -50%);         right: 10px;         span{           display: block;           width: 15px;           height: 15px;           border:1px solid #000;           text-align: center;           line-height: 15px;         }       }     }     .tabscon{       section{         display: none;         padding: 15px;         width: 100%;         height: 100px;       }       input{         width: 80%;         height: 100px;         word-wrap: break-word;       }       .conactive{         display: block;       }     }   } }

JS:

var that; class Tab {   constructor(id) {     that = this;     this.main = document.querySelector(id);     this.ul = this.main.querySelector('.fisrstNav ul')     this.tabscon = this.main.querySelector('.tabscon')     this.add = document.querySelector('.tabadd');     this.init()   }   //初始化相关操作与元素绑定   init() {     this.updataNode();     this.add.onclick = this.addTab;     for (let i = 0; i < this.lis.length; i++) {       this.lis[i].index = i;       this.lis[i].onclick = this.toggleTab;       this.spans[i].ondblclick = this.editTab;       this.removeIcon[i].onclick = this.removeTab;       this.sections[i].ondblclick = this.editTab;     }   }   //更新DOM   updataNode() {     this.lis = this.main.querySelectorAll('li');     this.sections = this.main.querySelectorAll('section');     this.removeIcon = this.ul.querySelectorAll('.icon');     this.spans = this.main.querySelectorAll('.fisrstNav li span:first-child');   }   //切换功能   toggleTab() {     that.clearClass()     this.className = 'liActive'     that.sections[this.index].className = 'conactive'   }   //清除样式   clearClass() {     for (let i = 0; i < that.lis.length; i++) {       this.lis[i].className = '';       this.sections[i].className = '';     }   }   //添加功能   addTab() {     that.clearClass()     const li = `<li class="liActive">新选项卡<span class="icon"></span></li>`;     const section = `<section class="conactive">新选项卡</section>`;     // 在ul中最后插入li     that.ul.insertAdjacentHTML('beforeend', li);     // 在.tabscon中最后插入section     that.tabscon.insertAdjacentHTML('beforeend', section);     that.init();   }   //删除功能   removeTab(e) {     //防止冒泡     e.stopPropagation();       var index = this.parentNode.index;     //根据索引删除li和section     that.lis[index].remove();     that.sections[index].remove();     //判断删除是否为选中li     if (document.querySelector('.liActive')) return     index--;     //手动调用li的点击事件     that.lis[index] && that.lis[index].click();     that.init();   }   //修改功能   editTab(){     //双击禁止选中文字     // 双击禁止选中文字     const str = this.innerHTML;     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();     this.innerHTML = `<input type="text" />`;     const input = this.children[0];     input.value = str;     //文本框文字处于选中     input.select();     input.onblur = function () {       this.parentNode.innerHTML = this.value;       this.remove;     }     input.onkeyup = function (e) {       if (e.keyCode === 13) {         this.blur();       }     }    } }  new Tab('#tab')

 新手自己学习,有什么问题请大家多多谅解

赞(0) 打赏
未经允许不得转载:张拓的天空 » 原生js面对对象Tab栏
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏