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

JavaScript 面向对象TAB栏切换


功能要求:

  1. 点击 tab 栏,可以切换效果.
  2. 点击 + 号,可以添加 tab 项和内容项.
  3. 点击 x 号,可以删除当前的 tab 项和内容项.
  4. 双击tab项文字或者内容项文字,可以修改里面的文字内容.

代码实现:

Obj_TAB.html(复制并保存为html文件,打开即可见效果):

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head>  <body>     <!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="https://blog-static.cnblogs.com/files/jacklzx/Obj_TAB.css">         <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/Obj_TAB_style.css">     </head>      <main>         <div class="tabsbox" id="tab">             <!-- tab 标签 -->             <nav class="firstnav">                 <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="https://blog-static.cnblogs.com/files/jacklzx/Obj_TAB.js"></script>  </body>  </html> 

Obj_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;     cursor: pointer; }  nav ul li.liactive {     border-bottom: 2px solid #fff;     z-index: 9; }  #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;     top: 0;     right: 0;     cursor: pointer; }  .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; } 

Obj_TAB.js:

var that; class Tab {     constructor(id) {         that = this;         this.main = document.querySelector(id);         // this.lis = this.main.querySelectorAll('li');         // this.sections = this.main.querySelectorAll('section');         this.add = this.main.querySelector('.tabadd');         // this.remove = this.main.querySelectorAll('.icon-guanbi');         this.ul = this.main.querySelector('.firstnav ul:first-child');         this.fsection = this.main.querySelector('.tabscon');         this.init();     }     init() {         this.updateNode();         this.add.onclick = this.addTab;         for (var i = 0; i < this.lis.length; i++) {             this.lis[i].index = i;             this.lis[i].onclick = this.toggleTab;             this.remove[i].onclick = this.removeTab;             this.spans[i].ondblclick = this.editTab;             this.sections[i].ondblclick = this.editTab;         }     }      // 获取所有li和section     updateNode() {             this.lis = this.main.querySelectorAll('li');             this.sections = this.main.querySelectorAll('section');             this.remove = this.main.querySelectorAll('.icon-guanbi');             this.spans = this.main.querySelectorAll('.firstnav li span:first-child');         }         // 1.切换     toggleTab() {         that.clearClass();         this.className = 'liactive';         that.sections[this.index].className = 'conactive';     }     clearClass() {             for (var i = 0; i < this.lis.length; i++) {                 this.lis[i].className = '';                 this.sections[i].className = '';             }         }         // 2. 添加     addTab() {             that.clearClass();             var random = Math.random();             // 创建             var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';             var section = '<section class="conactive">' + random + '</section>';             // 追加             that.ul.insertAdjacentHTML('beforeend', li);             that.fsection.insertAdjacentHTML('beforeend', section);             that.init();         }         // 3.删除     removeTab(e) {             e.stopPropagation(); // 阻止冒泡             var index = this.parentNode.index;             // console.log(index);             that.lis[index].remove();             that.sections[index].remove();             that.init();             // 删除后如果有li处于选定状态,就不要切换选项卡,否则切换到前一个选项卡             if (document.querySelector('.liactive')) return;             index--;             // 手动调用点击事件             that.lis[index] && that.lis[index].click();         }         // 4.修改     editTab() {         var str = this.innerHTML;         // 双击禁止选定文字         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();         this.innerHTML = '<input type="text" />';         var input = this.children[0];         input.value = str;         input.select(); // 默认选中         input.onblur = function() {                 this.parentNode.innerHTML = this.value;             }             // 按回车也能幅值         input.onkeyup = function(e) {             if (e.keyCode == 13) {                 this.blur();             }         }      } }  new Tab('#tab'); 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript 面向对象TAB栏切换
分享到: 更多 (0)

评论 抢沙发

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

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

联系我们本站主机

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

支付宝扫一扫打赏

微信扫一扫打赏