纯手写原生tab切换栏代码

Html

Css


    
        
            
                test1
            
            test2x
            test3x
        
        
            +
        
    
    
        test1--container
        test2--container
        test3--container

.box {
	width:500px;
	height:500px;
	margin:100px auto;
	border:1px solid #000;
}
.top {
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-bottom:1px solid #000;
	padding-right:2em;
}
ul {
	padding-left:0;
	list-style:none;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin:0;
}
ul li {
	position:relative;
	padding:15px 35px;
	border-right:1px solid #000;
}
ul li.active {
	background-color:#ddd;
}
ul li .iconfont {
	position:absolute;
	right:0;
	top:0;
	font-size:20px;
	background:#aaa;
	color:#fff;
	border-bottom-left-radius:5px;
}
.add-box {
	border:1px solid #ccc;
}
.add-box .iconfont {
	font-size:25px;
}
.bottom section {
	display:none;
}
.bottom section.item {
	display:block;
}

var that;
class Tab {
    constructor(id) {
        that = this;
        // 获取元素
        this.main = document.querySelector(id);

this.ul = this.main.querySelector('.top ul:first-child');

this.sectionCon = this.main.querySelector('.bottom');
        this.addBtn = this.main.querySelector('.add-box');
        // 创建实例后立即调用该方法
        this.init();
    }
    // 获取所有li和section
    getNode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.close = this.main.querySelectorAll('.icon-guanbi');
        this.spans = this.main.querySelectorAll('.top ul li span:first-child');
    }
    // 初始化 页面加载完成就给所有li绑定事件
    init() {
        this.getNode();
        this.addBtn.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.close[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }
    }
    // 切换功能
    toggleTab() {
        that.clearClass();
        this.className = 'active';
        that.sections[this.index].className = 'item';
    }
    // 添加功能
    addTab() {
        // 创建元素
        that.clearClass();
        var radom = Math.random();
        var li =
            '<li class="active"><span>new tab</span><span class="iconfont icon-guanbi"></span></li>';
        var section =
            ' <section class="item">test' + radom + ' --container</section>';
        // 将创建的元素添加到对应父元素
        that.ul.AdjacentHTML('beforeend', li);
        that.sectionCon.AdjacentHTML('beforeend', section);
        that.init();
    }
    // 删除功能
    removeTab(e) {
        // 阻止事件冒泡
        e.stopPropagation();
        var index = this.parentNode.index;
        // 根据索引删除对应li跟section
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        if (document.querySelector('.active')) {
            return;
        }
        index--;
        that.lis[index] && that.lis[index].click();
    }
    // 修改功能
    editTab(e) {
        e.stopPropagation();
        var str = this.innerText;
        // 双击禁止选中文字
        window.getSelection ?
            window.getSelection().removeAllRanges() :
            document.selection.empty();
        this.innerHTML = '<input type="text" />';
        var input = this.children[0];
        input.value = str;
        // input文字处于选中状态
        input.select();
        // input失去焦点，将输入的内容赋值给span
        input.onblur = function() {
            this.parentNode.innerText = this.value;
        };
        // 按下回车键进行赋值
        input.onkeyup = function(e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        };
    }
    // 清除class
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
}
new Tab('#tab');

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

纯手写原生tab切换栏代码



代码描述：原生、手写、tab选项卡切换代码

更新时间：2020-08-20 00:31:37

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

听说

相关代码

纯手写原生tab切换栏代码

最新