![在這裏插入圖片描述]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
border: 1px solid red;
width: 400px;
height: 300px;
margin: auto;
padding: 10px;
position: relative;
}
.content{
height: 100%;
}
.content section{
width: 100%;
height: 100%;
}
.hidden {
display: none;
}
.rightAdd{
position: absolute;
right:0;
top:12px
}
</style>
</head>
<body>
<div id='tabComponent'>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<div class='rightAdd'><button>+</button></div>
<div class="content">
<section>1 hello </section>
<section class="hidden">2 good</section>
<section class="hidden">3 ample</section>
</div>
</div>
</body>
<script type="text/javascript">
var that = null;
class Tab{
init() {
window.self = this;
this.content = this.main.querySelectorAll('section')
this.list = this.main.querySelectorAll('li')
for(var i=0;i<this.list.length;++i) {
this.list[i].index = i;
this.list[i].onclick=this.toggleTab;
this.list[i].ondblclick = this.removeTab;
}
this.btnAdd.onclick = this.addTab;
this.binddoubleClick()
}
constructor(pos) {
this.main = document.querySelector(pos)
this.list = this.main.querySelectorAll('li')
this.ul = this.main.querySelector('ul')
this.content = this.main.querySelectorAll('section')
this.btnAdd = document.querySelector('.rightAdd')
that = this;
this.init()
}
toggleTab() {
for(var i=0;i<window.self.list.length;++i) {
self.list[i].className = ''
}
this.className = 'active'
for(var i = 0;i<window.self.content.length;++i) {
self.content[i].className = 'hidden'
}
self.content[this.index].className = ''
}
addTab() {
console.log('ss')
let li = '<li role="presentation"><a href="#">編輯</a></li>'
that.ul.insertAdjacentHTML('beforeend',li)
that.main.querySelector('.content').insertAdjacentHTML('beforeend','<section class="hidden">'+ Math.ceil(Math.random()*100)+'</section>')
console.log(that.content)
that.init();
}
removeTab(e) {
let index = this.index;
console.log(index)
that.list[index].remove()
that.content[index].remove()
that.updateNode()
that.init()
}
editTab() {
let v = this.innerHTML
this.innerHTML = "<textarea>"+v+"</textarea>"
let textarea = this.children[0]
textarea.onblur = function() {
this.parentNode.innerHTML = this.value;
}
textarea.onkeyup = function(e) {
if(e.keyCode === 13) {
textarea.blur()
}
}
}
updateNode() {
this.list = this.main.querySelector('li')
this.content = this.main.querySelector('section')
}
binddoubleClick() {
let arr = that.content;
for(let i = 0;i<arr.length;++i) {
arr[i].ondblclick = that.editTab
}
}
}
var tab = new Tab('#tabComponent')
</script>
</html>
