js实现动态添加标签页

男娘i 2023-07-08 12:29 16阅读 0赞

## js实现动态添加标签页，能够进行标签的添加，删除，修改，内容切换 ##

源码：  
addTab.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/common.css">
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
        <link rel="stylesheet"  href="addTab.css"/>
    	<style type="text/css">
    
        </style>
    </head>
    <body>
       <div class="addTab">
    	   <h4 class="title">js面向对象动态添加标签页</h4>
    	   <div class="tabsbox" id="tab">
    	       <nav class="nav-tab">
    			   <ul class="tab-items">
    				   <li class="tab-item">
    					   <span class="text" >测试1</span>
    					   <input type="text" class="input">
    
    
    				   		<span class="close" >×</span>
    				   </li>
    				   <li  class="tab-item">
    					   <span  class="text" >测试2</span>
    					   <input type="text" class="input">
    					   
    
    					   <span class="close">×</span>
    				   </li>
    			   </ul>
    			   <button class="add-btn" id="add-btn" >+</button>
    	       </nav>
    		   <div class="tabs-content">
    			   <section class="conactive">内容1</section>
    			   <section class="noactive">内容2</section>
    		
    		   </div>
    
    	   </div>
    
       </div>
    	<script type="text/javascript" src="addTab.js"></script>
    
    </body>
    </html>

addTab.less

@fontsize750: 50;
    .addTab{ 
    	width: 750rem /@fontsize750;
    	display:flex;
    	flex-flow: column nowrap;
    	align-items:center; .title{ 
    
    
    	}
    	.tabsbox{ 
    		display: flex;
    		width: 702rem /@fontsize750;
    		margin: 0 auto;
    		border: 1rem /@fontsize750 solid beige;
    		flex-flow: column nowrap; .nav-tab{ 
    			display: flex;
    			justify-content: space-between; .tab-items{ 
    				margin: 0;
    				padding: 0;
    				display: flex;
    				list-style-type:none; .tab-item{ 
    					position: relative;
    					display: flex;
    					align-items: center;
    					justify-content: center;
    					width:100rem /@fontsize750;
    					height: 50rem /@fontsize750;
    
    					margin: 0;
    					padding: 0;
    					border-right: 1rem /@fontsize750 solid black;
    					border-bottom:1rem /@fontsize750 solid black;
    
    					.close{ 
    						position: absolute;
    						top: 0;
    						left: 80rem /@fontsize750;
    						width: 20rem /@fontsize750;
    						height: 20rem /@fontsize750;
    						display: flex;
    						justify-content: center;
    						align-items: center;
    
    						background-color: #000000;
    						color: #ffffff;
    						z-index: 1000; &:hover{ 
    							cursor: pointer;
    						}
    
    					}
    					.text{ 
    						font-size: 18rem /@fontsize750;
    						/*background-color: #000000;*/
    						width: 55rem /@fontsize750;
    						height: 30rem /@fontsize750;
    
    
    					}
    					.input{ 
    						display: none;
    						width: 55rem /@fontsize750;
    						height: 30rem /@fontsize750;
    					}
    
    				}
    				.tab-active{ 
    					border-bottom: none;
    				}
    			}
    			.add-btn{ 
    				/*flex: 1;*/
    				font-size: 20rem /@fontsize750;
    				width:80rem /@fontsize750;
    				height: 50rem /@fontsize750;
    
    			}
    
    		}
    		.tabs-content{ 
    			font-size: 16rem /@fontsize750;
    			height: 300rem /@fontsize750;
    			.conactive{ 
    				display: block;
    			}
    			.noactive{ 
    				display: none;
    			}
    
    
    		}
    
    
    	}
    }

addTab.js

var that
    class  Tab { 
      constructor (id) { 
        that = this
        this.main =document.querySelector(id)
        console.log(this.main)
        this.lis= this.main.querySelectorAll('li')
        console.log(this.lis)
        this.sections = this.main.querySelectorAll('section')
        console.log(this.sections)
        this.addBtn = this.main.querySelector('#add-btn')
        console.log(this.addBtn)
        this.defaultIndex =  this.lis.length
      }
      //初始化
      init () { 
        for (var i =0;i < that.lis.length; i++){ 
          that.lis[i].index = i
          that.lis[i].querySelectorAll('.close')[0].onclick=this.removeTabs//点击close触发删除事件
          that.lis[i].querySelectorAll('.text')[0].onclick=this.editTab//点击文本触发编辑事件
          that.lis[i].querySelectorAll('.input')[0].onblur=this.restoreText//input失去焦点后input消失，text出现
          that.lis[i].onclick=that.toggleTab//点击li触发标签切换事件
        }
        that.addBtn.onclick=that.addTab
      }
      
      
      restoreText () { 
        console.log('restore text:')
        var index = this.parentNode.index
       /* console.log(index)*/
        var content =  that.lis[index].querySelectorAll('.input')[0].value
        var beforeContent = that.lis[index].querySelectorAll('.text')[0].innerText
        that.lis[index].querySelectorAll('.text')[0].innerHTML=content
        if ((content === null || content === '') === true){ 
          that.lis[index].querySelectorAll('.text')[0].innerHTML = beforeContent
        }
        that.lis[index].querySelectorAll('.text')[0].style.display='block'
        that.lis[index].querySelectorAll('.input')[0].style.display='none'
        /*console.log(this)*/
    /* var text =*/
      }
      //删除
      removeTabs (e) { 
    
        //防止冒泡
        e.stopPropagation()
        var index = this.parentNode.index
      /* console.log(index)*/
        that.lis[index].remove()
        that.sections[index].remove()
        that.sections =  that.main.querySelectorAll('section')
    
        that.lis= that.main.querySelectorAll('li')
        that.init()
    
        /*that.sections = that.main.querySelectorAll('section') that.lis= that.main.querySelectorAll('li')*/
      /* console.log(this.remove())*/
    /* console.log('this:') this.removeChild(this)*/
      }
      //切换tab
      toggleTab () { 
        /*console.log( this.index)*/
    
        this.className='tab-active tab-item'
        for (var i =0;i < that.lis.length; i++){ 
          if (that.lis[i].index !== this.index){ 
            that.lis[i].className='tab-item'
          }
        }
      /* console.log( that.sections[this.index])*/
        that.sections[this.index].className='conactive'
        for (var i =0;i < that.sections.length; i++){ 
          if (i !== this.index){ 
            that.sections[i].className='noactive'
          }
        }
      }
    
      //添加
      addTab () { //这个方法是使用面向过程的思想写的
        var tabs = document.getElementsByClassName('tab-items')
        var addBtn = document.getElementById('add-btn')
       /* console.log(tabs[0].offsetWidth ) console.log(addBtn.offsetWidth) console.log(tabs[0].offsetWidth + addBtn.offsetWidth)*/
        /*if (tabs[0].offsetWidth + addBtn.offsetWidth >600){ return }*/
        console.log(that.lis.length)
        if (that.lis.length>5) { 
          return
        }
        that.defaultIndex += 1
        var tab = document.createElement('li')
        tab.className='tab-item'
    
      /* tab.innerHTML='测试' + that.defaultIndex*/
        var closeSpan = document.createElement('span')
        closeSpan.className='close'
        closeSpan.innerHTML='×'
        /*closeSpan.οnclick=*/
        tab.onclick=that.toggleTab
    
        tab.appendChild(closeSpan)
    
        var textSpan = document.createElement('span')
        textSpan.className='text'
        textSpan.innerHTML='测试' +  that.defaultIndex
    
    
        tab.appendChild(textSpan)
       /* console.log(tabs[0].children.length-1)*/
        tabs[0].appendChild(tab)
        var input = document.createElement('input')
        input.className='input'
        tab.appendChild(input)
        var section = document.createElement('section')
        section.className='noactive'
        section.innerHTML='内容' +  that.defaultIndex
        /* console.log( that.sections)*/
        document.getElementsByClassName('tabs-content')[0].appendChild(section)
    
        that.sections =  that.main.querySelectorAll('section')
    
        that.lis= that.main.querySelectorAll('li')
        that.init()
    
      }
    
      //修改
      editTab (e) { 
        e.stopPropagation()
        var index = this.parentNode.index
      /* var content = that.lis[index].querySelectorAll('.text')[0].innerText console.log(that.lis[index].querySelectorAll('.text')[0].innerText)*/
        that.lis[index].querySelectorAll('.text')[0].style.display='none'
        that.lis[index].querySelectorAll('.input')[0].style.display='block'
      /* console.log(that.lis[index].querySelectorAll('.text')[0].style)*/
       /* this.style.contenteditable='true'*/
       /* console.log(this.style.contenteditable)*/
      }
    
    }
    //实例化tab对象
    var tab =new Tab('#tab')
    //初始化tab对象
    tab.init()

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202002261706293.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ==,size_16,color_FFFFFF,t_70