JavaScript 面向对象tag栏切换删除添加修改内容

最新推荐文章于 2023-08-14 08:56:30 发布

英俊男孩

最新推荐文章于 2023-08-14 08:56:30 发布

阅读量386

点赞数

文章标签： javascript js css

本文链接：https://blog.csdn.net/qq_44829011/article/details/106110854

版权

js用面向对象的方法实现 tag栏其中每一个li对应下面的一块内容
切换删除添加修改内容

即Tab类以下的四个功能
点击标签栏的选项可以实现切换的效果
点击 + 可以创建标签栏的选项以及对应的标签页
点击 x 可以删除标签栏的选项以及对应的标签页
双击标签栏选项或者标签页中的内容，可以修改它们的内容

虽然样式比较粗糙但是功能很全面
**
在这里插入图片描述

先上代码

<!DOCTYPE hvar tml>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript 面向对象tag栏</title>
    <script>
    window.onload= function(){
   
    	var that ;
    	class Tab{
   
    		constructor(){
   
    		//获取元素 	
    		that =this;
    		this.flag =1;  /*阻止删除时间冒泡*/
    		this.main =document.querySelector('#id_0');
    		this.lis =this.main.querySelectorAll('li');
    		this.add =this.main.querySelector('.tabadd');
    		//console.log(this.lis.length);
    		this.sections=this.main.querySelectorAll('section');
    		this.ul =this.main.querySelector('#id_1 ul:last-child');
    		//this.sections =this.mian.querySelector('.tabscon');/*保存所有sections*/
    		this.remove =this.main.querySelectorAll('.remove_tag');
    		
    		this.init();
    		this.editTab();
    		}
    		init(){
   
    			// 初始化 tag框click事件绑定
    			for(var i=0;i <this.remove.length;i++){
   
    				this.remove[i].onclick =function (){
   
    					/*赋值remove函数不好使 */
    					that.flag=0;//阻止删除时间冒泡
    					var index_this = this.parentNode.index; //点击对象li次序
    					
    					this.parentNode.parentNode.children[index_this].remove();  //删除li
    					//this.parentNode.children[index_this].remove();
    					that.sections[index_this].remove();
    					
    					that.lis =that.main.querySelectorAll('li');
						that.sections=that.main.querySelectorAll('section');
    					that.ul =that.main.querySelector('#id_1 ul:last-child');
    					
    					return false;
    				}
    				
    				//this.remove[i].onclick.preventDefault();
    			}
    			for(var i=0;i <this.lis.length;i++){
   
    				this.lis[i].index =i;
    				this.lis[i].onclick= this.toggleTab;
    				
    			}
    			that.add.onclick=that.addTab;
    		}
    		//1.切换功能
    		toggleTab(){
   
					if(that.flag ===0){
   
						that.flag=

最低0.47元/天解锁文章

英俊男孩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 面向对象tag栏切换删除添加修改内容

js用面向对象的方法实现 tag栏其中每一个li对应下面的一块内容切换删除添加修改内容即Tab类以下的四个功能点击标签栏的选项可以实现切换的效果点击 + 可以创建标签栏的选项以及对应的标签页点击 x 可以删除标签栏的选项以及对应的标签页双击标签栏选项或者标签页中的内容，可以修改它们的内容虽然样式比较粗糙但是功能很全面**先上代码**<!DOCTYPE hvar tml><html> <head> <meta charset="ut
复制链接

扫一扫