很简约的tab格式（原创）

Html

Css

* {
	margin:0;
	padding:0;
}
.box {
	width:800px;
	height:400px;
	margin:100px auto 0;
	border:1px solid #000000;
}
.box-hd {
	border-bottom:1px solid #000000;
	height:40px;
}
.box-hd-menu {
	float:left;
}
.box-hd-menu li {
	float:left;
	width:120px;
	height:41px;
	line-height:40px;
	border-right:1px solid #000000;
	margin:-1px 0 0 -1px;
	padding:0 6px;
	font-size:20px;
	list-style:none;
}
.box-hd-menu i {
	color:#666666;
	font-size:10px;
}
.box-hd-menu .active {
	border-bottom:1px solid white;
}
.box-hd-menu p {
	float:left;
	width:90%;
}
.box-hd-menu i {
	float:right;
}
.box-hd-add-btn {
	float:right;
	line-height:40px;
	margin-right:6px;
}
.box-bd {
	clear:both;
	margin:40px 20px 0;
}
.box-bd div {
	display:none;
	width:100%;
	height:300px;
}
.box-bd .active {
	display:block;
}
input {
	width:80%;
	height:30px;
	display:inline-block;
	border:2px solid #3967FF;
	font-size:18px;
}
textarea {
	resize:none;
	width:100%;
	height:300px;
	border:2px solid #3967FF;
}

function Tab(selector) {
    this.oTab = document.querySelector(selector);
    this.oUl = this.oTab.querySelector('.box-hd-menu')
    this.oAdd = this.oTab.querySelector('.box-hd-add-btn i')
    this.oDiv = this.oTab.querySelector('.box-bd')

this.init()
}

Tab.prototype.init = function() {
    var _this = this

this.updateNode();

this.oAdd.onclick = function() {
        _this.add()
    }

for (var i = 0; i < this.oLl.length; i++) {
        this.oLl[i].index = i;
        this.oLl[i].onclick = function() {
            _this.toggle(this)
        }

this.oTil[i].ondblclick = function(e) {
            _this.edit(e, this)
        }

this.oDel[i].onclick = function(e) {
            e.stopPropagation()
            _this.del(this)
        }

this.oCont[i].ondblclick = function(e) {
            _this.edit(e, this)
        }
    }
}

Tab.prototype.add = function() {
    var li = '<li><p>新选项卡</p><i class="iconfont  icon-del">×</i></li>'
    var div = '<div><p>内容区域...</p></div>'

this.oUl.AdjacentHTML('beforeend', li)
    this.oDiv.AdjacentHTML('beforeend', div)

this.init()
}

Tab.prototype.clear = function() {
    for (var i = 0; i < this.oLl.length; i++) {
        this.oLl[i].classList.remove('active')
        this.oCont[i].classList.remove('active')
    }
}

Tab.prototype.updateNode = function() {
    this.oLl = this.oTab.querySelectorAll('.box-hd-menu li')
    this.oCont = this.oTab.querySelectorAll('.box-bd div')
    this.oTil = this.oTab.querySelectorAll('.box-hd-menu p')
    this.oDel = this.oTab.querySelectorAll('.box-hd-menu i')
}

Tab.prototype.del = function(elm) {
    var i = elm.parentNode.index

this.oLl[i].remove()
    this.oCont[i].remove()
    this.init()

i--;
    if (this.oUl.querySelector('.active')) return

this.oLl[i] && this.oLl[i].click()
}

Tab.prototype.toggle = function(elm) {
    this.clear();

this.oLl[elm.index].classList.add('active')
    this.oCont[elm.index].classList.add('active')
}

Tab.prototype.edit = function(e, elm) {
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    var txt = elm.innerText
    if (elm.nodeName.toLowerCase() == 'p') {
        elm.innerHTML = '<input type="text" value="' + txt + '">'
    } else {
        elm.innerHTML = '<input type="text" value="' + txt + '">'
    }
    elm.children[0].select()

elm.children[0].onblur = function() {
        elm.innerText = this.value
    }

if (elm.nodeName.toLowerCase() == 'p') {
        elm.children[0].onkeyup = function(e) {
            if (e.keyCode == 13) {
                this.blur()
            }
        }
    }
}

var tab = new Tab('.box');

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

立即下载

很简约的tab格式（原创）

代码描述：很容易上手的tab格式，适用于公司的后台管理系统。

更新时间：2021-07-05 09:59:04
整个代码使用了一个简单的布局，可以随意添加自己喜欢的css。点击右上角的加号（可以换自己的样式），添加新标题，单击标题内容随之切换，双击标题可以修改标题内容，双击内容可添加内容，多添加标题点击标题右边删除也可以删掉。总体的交互体验很舒服。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

杨迎辉

相关代码

很简约的tab格式（原创）

最新