原生JavaScript写出Tabs标签页

坚强的老罗 發表於 2020-7-20 15:17:00

最近在重新学习JavaScript，手写了一个tabs标签页。
  话不多说，直接开始。  
  首先，是前端页面。
<img src="https://img2020.cnblogs.com/blog/1062307/202005/1062307-20200527191712805-47963246.png">
 
图1 tabs
先来把tabs分解一下：<img src="https://img2020.cnblogs.com/blog/1062307/202005/1062307-20200527192202963-1705227556.png">图2 tabs分解
首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容；下方是导航栏的内容section。
导航tabs.html代码如下：
<div class="cnblogs_code">
<pre><!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>
<main>
 <div class="tabsbox" id="tab">
 
 <nav class="firstnav">
 <ul>
 <li class="liactive"><span>测试1</span><span class="icon-guanbi">X</span></li>
 <li><span>测试2</span><span class="icon-guanbi">X</span></li>
 <li><span>测试3</span><span class=" icon-guanbi">X</span></li>
 </ul>
 <div class="tabadd">
 <span>+</span>
 </div>
 </nav>

 
 <div class="tabscon">
 <section class="conactive">测试内容1</section>
 <section>测试内容2</section>
 <section>测试内容3</section>
 </div>
 </div>
</main>

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

</html>
<style>
* {
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 #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;
/* 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;
}
</style> </pre>
</div>
由于给导航栏增删查改的js代码很多，我单独用一个js文件写tabs.js，在tabs.html里引用就行。
实现的导航栏功能有：
　　1）导航栏的切换功能
       2）增加导航栏的功能
       3）删除导航栏的功能
   tabs.js代码如下：
<div class="cnblogs_code">
<pre>1 var that;
2 class Tab {
3 constructor(id){
4 that = this;
5 //获取元素
6 this.main = document.querySelector(id);
7
8 this.add = this.main.querySelector('.tabadd');
9 //li的父元素
 10 this.ul = this.main.querySelector('.firstnav ul:first-child');
 11 //section的父元素
 12 this.fsection = this.main.querySelector('.tabscon');
 13 this.init();
 14 }
 15 //初始化操作
 16 init(){
 17 this.updateNode();
 18 this.add.onclick = this.addTab;
 19 for(let i = 0;i<this.lis.length;i++){
 20 this.lis.index = i;
 21 this.lis.onclick = this.toggleTab;
 22 this.remove.onclick = this.removeTab;
 23 this.spans.ondblclick = this.editTab;
 24 this.sections.ondblclick = this.editTab;
 25 }
 26 }
 27 //获取li跟section
 28 updateNode(){
 29 this.lis = this.main.querySelectorAll('li');
 30 this.sections = this.main.querySelectorAll('section');
 31 this.remove = this.main.querySelectorAll('.icon-guanbi');
 32 this.spans = this.main.querySelectorAll('.firstnav li span:first-child')
 33 }
 34 //1.切换功能
 35 toggleTab(){
 36
 37 that.clearClass();
 38 this.className = 'liactive';
 39 that.sections[this.index].className = 'conactive';
 40 }
 41 clearClass(){
 42 for(let i = 0;i<this.lis.length;i++){
 43 this.lis.className = '';
 44 this.sections.className = '';
 45 }
 46 }
 47 //2.添加功能
 48 addTab(){
 49 that.clearClass();
 50 //1)添加li元素和section
 51 var random = Math.random()
 52 var li = '<li class="liactive">新选项卡X</li>';
 53 var section = '<section class="conactive">'+random+'</section>';
 54
 55 //2）把两个元素添加到对应的父级元素中
 56 that.ul.insertAdjacentHTML('beforeend',li);
 57 that.fsection.insertAdjacentHTML('beforeend',section);
 58 that.init();
 59 }
 60 //3.删除功能
 61 removeTab(e){
 62 e.stopPropagation();
 63 var index = this.parentNode.index;
 64 console.log(index);
 65 //删除对应节点
 66 that.lis.remove();
 67 that.sections.remove();
 68 //删除后及时更新页面中的节点
 69 that.init();
 70 //如果当前页面有选中状态，就不用执行下面的步骤
 71 if(document.querySelector('.liactive')) return;
 72 //让index前一个处于选中状态
 73 index--;
 74 that.lis && that.lis.click();
 75 }
 76 //4.修改功能
 77 editTab(){
 78 let str = this.innerHTML;
 79 // console.log(str);
 80 //禁止双击选中文字
 81 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
 82 this.innerHTML='<input type="text">'
 83 let input = this.children;
 84 input.value = str;
 85 input.select();
 86 //input失去焦点后变回span
 87 input.onblur = function(){
 88 this.parentNode.innerHTML= this.value;
 89 }
 90 //按回车也能
 91 input.onkeyup = function(e){
 92 if(e.keyCode == 13){
 93 this.blur();//获得焦点
 94 }
 95
 96 }
 97
 98 }
 99 }
100new Tab('#tab');
101 // tab.init();</pre>
</div>
 
  
来源：https://www.cnblogs.com/leejjfly/p/12985115.html

頁: [1]

琼殿技术论坛's Archiver

原生JavaScript写出Tabs标签页