ES6学习篇二

最新推荐文章于 2024-09-22 11:17:00 发布

五月枼

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量98

点赞数

分类专栏： ES6的学习路文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45073034/article/details/107863204

版权

ES6的学习路专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用面向对象的方法完成选项卡效果，包括切换，添加，删除，编辑

<div class="tab" id="tab">
    <nav class="first">
        <ul>
            <li class="liveactive"><span>测试  </span><i class="icon">x</i></li>
            <li><span>测试2 </span><i class="icon">x</i></li>
            <li><span>测试3 </span> <i class="icon">x</i></li>
        </ul>
        <div class="tabadd">
            <span>+</span>
        </div>
    </nav>
    <div class="tabscon">
        <section class="conactiv">测试1</section>
        <section>测试2</section>
        <section>测试3</section>
    </div>
</div>

<script>
	let that;
	class Tab {
	    constructor (id){
	        that = this;
	        this.main = document.querySelector(id);
	        this.add = this.main.querySelector('.tabadd');
	        this.ul = this.main.querySelector('.first ul:first-child');
	        this.fsetion = this.main.querySelector('.tabscon');
	        this.init();
	    }
	    // 初始化
	    init(){
	        this.updataNode();
	        this.add.onclick = this.addTab;
	        this.lis.forEach((item,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.section[i].ondblclick = this.editTab;
	        });
	    }
	    // 更新获取dom
	    updataNode(){
	        this.lis = this.main.querySelectorAll('li');
	        this.section = this.main.querySelectorAll('section'); 
	        this.remove = this.main.querySelectorAll('.icon');
	        this.spans = this.main.querySelectorAll('.first li span');
	    }
	    // 切换
	    toggleTab(){
	        that.clearTab();
	        this.className= 'liveactive';
	        that.section[this.index].className = 'conactiv';
	    }
	    // 删除样式
	    clearTab(){
	        for(let i = 0;i<this.lis.length;i++){
	            this.lis[i].className = '';
	            this.section[i].className  = '';
	        }
	    }
	    // 添加tab
	    addTab(){
	        that.clearTab();
	        var random = Math.random();
	        var li  = '<li class="liveactive"><span>新选项卡  </span><i class="icon">x</i></li>';
	        var section = '<section class="conactiv">测试'+random+'</section>';
	        // insertAdjacentHTML添加dom
	        that.ul.insertAdjacentHTML('beforeend', li);  
	        that.fsetion.insertAdjacentHTML('beforeend',section)
	        that.init();
	    }
	    // 删除
	    removeTab(e){
	        e.stopPropagation(); //冒泡
	        var index = this.parentNode.index;  //parentNode父级
	        console.log(index)
	        that.lis[index].remove();
	        that.section[index].remove();
	        that.init();
	        if(document.querySelector('.liveactive')) return;  // 如果有这个类名就返回
	        index--;
	        that.lis[index]&&that.lis[index].click();
	    }
	    // 编辑
	    editTab(){
	        var str = this.innerHTML;
	        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消双击选中效果
	        this.innerHTML = '<input type="text">';
	        var input  = this.children[0]; // children返回元素的集合
	        input.value = str;
	        input.select(); //select选中效果
	        input.onblur = function(){
	            this.parentNode.innerHTML = this.value;
	        }
	        input.onkeyup = function(e){
	            if(e.keyCode == 13){
	                this.blur();
	            }
	        }
	    }
	};
	new Tab('#tab');
</script>