主要功能包括
- tab栏切换
- 增加删除tab栏
- 双击可以修改tab栏的文字
- 双击可以修改文本内容
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
input{
height: 25px;
}
.tabsbox {
width: 800px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
}
.firstnav {
width: 100%;
height: 50px;
border-bottom: 1px solid #696969;
position: relative;
}
.firstnav ul li {
float: left;
width: 60px;
height: 100%;
text-align: center;
line-height: 50px;
border-right: 1px solid #696969;
position: relative;
cursor: pointer;
font-size: 13px;
}
.liactive {
background-color: red;
}
.tabadd span {
width: 20px;
height: 20px;
border: 1px solid #999;
text-align: center;
line-height: 20px;
position: absolute;
right: 8px;
top: 15px;
cursor: pointer;
}
.iconfont {
width: 15px;
height: 15px;
background-color: aqua;
border-radius: 0px 0px 0px 15px;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
.tabson {
width: 100%;
height: 350px;
}
.conactive {
width: 100%;
height: 350px;
background-color: rebeccapurple;
display: block !important;
}
.tabson section {
display: none;
}
<div class="tabsbox" id="tab">
<nav class="firstnav">
<ul>
<li class="liactive"><span>测试1</span><span class="iconfont"></span></li>
<li><span>测试2</span><span class="iconfont"></span></li>
<li><span>测试3</span><span class="iconfont"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<div class="tabson">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
var that;
class Tab {
constructor(id) {
that = this;
this.main = document.querySelector(id);
this.add = this.main.querySelector('.tabadd');
this.ul = this.main.querySelector('.firstnav ul:first-child');
this.fsection = this.main.querySelector('.tabson')
this.init();
}
init() {
this.updateNode();
this.add.onclick = this.addTab;
for (var i = 0; i < this.lis.length; 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.sections[i].ondblclick=this.editTab;
}
}
updateNode() {
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
this.remove = this.main.querySelectorAll('.iconfont');
this.spans=this.main.querySelectorAll('.firstnav li span:first-child');
}
toggleTab() {
that.clearClass();
this.className = 'liactive';
that.sections[this.index].className = 'conactive';
}
clearClass() {
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].className = '';
this.sections[i].className = '';
}
}
addTab() {
that.clearClass();
var li = '<li class="liactive"><span>新选项</span><span class="iconfont"></span></li>';
var section = '<section class="conactive">测试1</section>'
that.ul.insertAdjacentHTML('beforeend', li);
that.fsection.insertAdjacentHTML('beforeend', section);
that.init();
}
removeTab(e) {
e.stopPropagation();
var index = this.parentNode.index;
console.log(index);
that.lis[index].remove();
that.sections[index].remove();
that.init();
if(document.querySelector('.liactive')) 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];
input.value=str;
input.select();
input.onblur=function(){
this.parentNode.innerHTML =this.value
};
input.onkeyup=function(e){
if(e.keyCode===13){
this.blur();
}
}
}
}
new Tab('#tab');