功能效果如下：
实现代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>面向对象 Tab</title>
<link rel="stylesheet" href="./styles/tab.css">
<link rel="stylesheet" href="./styles/style.css">
<script src="1.js" type="text/javascript" charset="utf-8">javascript"></script>
</head>
<body>
<main>
<h4>
Js 面向对象 动态添加标签页
</h4>
<div class="tabsbox" id="tab">
<!-- tab 标签 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab 内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
</main>
</body>
</html>
CSS：
style.css
@font-face {font-family: "iconfont";
src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */
src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),
url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-guanbi:before {
content: "\e676";
}
tab.css:
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
main {
width: 960px;
height: 500px;
border-radius: 10px;
margin: 50px auto;
}
main h4 {
height: 100px;
line-height: 100px;
text-align: center;
}
.tabsbox {
width: 900px;
margin: 0 auto;
height: 400px;
border: 1px solid lightsalmon;
position: relative;
}
nav ul {
overflow: hidden;
}
nav ul li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid #ccc;
position: relative;
}
nav ul li.liactive {
border-bottom: 2px solid #fff;
z-index: 9;
}
#tab input {
width: 80%;
height: 60%;
}
nav ul li span:last-child {
position: absolute;
user-select: none;
font-size: 12px;
top: -18px;
right: 0;
display: inline-block;
height: 20px;
}
.tabadd {
position: absolute;
/* width: 100px; */
top: 0;
right: 0;
}
.tabadd span {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid #ccc;
float: right;
margin: 10px;
user-select: none;
}
.tabscon {
width: 100%;
height: 300px;
position: absolute;
padding: 30px;
top: 50px;
left: 0px;
box-sizing: border-box;
border-top: 1px solid #ccc;
}
.tabscon section,
.tabscon section.conactive {
display: none;
width: 100%;
height: 100%;
}
.tabscon section.conactive {
display: block;
}
JS:
javascript">//1.点击tab栏，可以实现切换效果
//2.点击+号，可以添加tab项和内容项
//3.点击x号，可以删除tab项和内容项
//4.双击tab项文字或者内容选项文字，可以编辑里面的文字内容
//抽象对象（Tab对象）
//该对象具有切换功能；该对象具有添加功能；该对象具有删除功能；该对象具有修改功能
window.onload = function() {
var that;
class Tab {
constructor(id) { //接收参数
//获取元素
//获取整个tab栏(最大盒子)
//console.log(this);
that = this;
this.main = document.querySelector(id);
this.tabadd = this.main.querySelector('.tabadd');
this.ul = this.main.querySelector('.fisrstnav ul:first-child');
this.tabscon = this.main.querySelector('.tabscon');
this.init();
}
//初始化操作，让相关的元素绑定元素
init() {
this.updateNode();
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;
}
this.tabadd.onclick = this.addTab;
}
//获取所以的小li和 section
updateNode() {
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
this.remove = this.main.querySelectorAll('.icon-guanbi');
this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
}
//切换功能
toggleTab() {
//console.log(this.index);//这里的this指向函数的调用者,就是当前小li lis[i]
//为所以小li和section 清除类样式
that.clearClass(); //这里面的this是当前的一个小li ，所以这里不能使用this调用
this.className = 'liactive';
that.sections[this.index].className = 'conactive';
}
//清除类样式
clearClass() {
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].className = '';
that.sections[i].className = '';
}
}
//添加功能
addTab() {
//点击+号 可以实现添加新的选项卡和内容
//1.创建新的选项卡li和新的内容section
//2.把创建的两个元素追加到对应的父元素中
//以前的做法：动态创建元素createElement，但是元素里面内容较多，需要
//innerHTML赋值，在appendChild追加到父元素里面
//现在的高级做法：利用insertAdjacentHTML（）可以直接把字符串格式元素添加到父元素中
//appendChild不支持追加字符串的子元素，insertAdjacentHTML支持追加字符串的元素
var random = Math.random();
that.clearClass();
var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
var section = '<section class="conactive">测试' + random + '</section>';
//因为是tabadd这个按钮调用的这个方法，所以this为这个按钮
that.ul.insertAdjacentHTML('beforeend', li);
that.tabscon.insertAdjacentHTML('beforeend', section);
that.init();
}
//删除功能
removeTab(e) {
//点击X号可以删除当前的li选项卡和当前的section
//X是没有索引号的，但是它的父亲li有索引号，
//点击X号可以删除这个索引号对应的li和section
var index = this.parentNode.index;
//console.log(index);
//因为X号和小li都有点击事件，会有冒泡,所以要阻止冒泡,这样就不会触发li的点击事件
e.stopPropagation();
//根据相应索引号删除li和section,remove（）方法可以直接删除指定的元素
that.lis[index].remove();
that.sections[index].remove();
that.init(); //重新获取删除完之后剩下 的小li和section
//当删除的不是选中状态的小li的时候，原来选中状态的小li保持不变
if (document.querySelector('.liactive')) {
return; //如果进入if语句的话，return后面的代码将不会执行!!!!!!!
//如果是删除选中状态的小li，则这个选中状态的小li没有.liactive样式
}
//当删除了选的状态的li的时候，让他前一个li处于选定状态,其实就是让前面的li为点击状态
index--;
//手动调用点击事件，不需要鼠标触发,但是当index等于0的时候再删会报错
//当index==-1时就找不到这个索引的小li了
that.lis[index] && that.lis[index].click();
}
//修改功能
editTab() {
var str = this.innerHTML;
//双击选项卡li或者section里面的文字可以实现修改操作
//如果双击文字，默认会选定文字，此时需要双击禁止选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.innerHTML = '<input type="text" />';
var input = this.children[0];
input.value = str;
input.select(); //让文本框里面的文字处于选定状态
//当文本框失去焦点是，就把文本框内的值给span
input.onblur = function() {
this.parentNode.innerHTML = this.value;
}
//按下回车也可以把文本框的值给span
input.onkeyup = function(e) {
if (e.keyCode === 13) {
//this.blur();
this.parentNode.innerHTML = this.value;
}
}
}
}
new Tab('#tab');
}
