案例样式：
anli.png
HTML结构：
<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>
JS结构：
var that;
class Tab {
constructor(name) {
that = this // 把实例对象的内容赋值给that
this.main = document.querySelector(name) // 获取大盒子
this.add = this.main.querySelector('.tabadd') // 获取大盒子里面的添加按钮
this.ul = this.main.querySelector('.fisrstnav ul:first-child') // li 的父元素,获取ul元素
this.fsection = this.main.querySelector('.tabscon') // section 父元素 tabscon
this.init() // 通过实例化对象调用此函数
}
// initialize 初始化(重新加载)
init() {
that.updataNode() // 页面初始化之后开始获取这些元素，做绑定事件
// 页面初始化之后，给相关的元素的绑定事件
this.add.onclick = this.addTab; // 给加号按钮添加绑定事件
for (var i = 0; i < this.lis.length; i++) {
// 给每一个li添加一个元素和索引号
this.lis[i].index = i
// 给所有的小li绑定点击事件; 点击之后才调用此函数
this.lis[i].onclick = this.toggleTab;
// 给所有的关闭按钮绑定点击事件
this.remove[i].onclick = this.removeClass;
// 双击事件用 dblclick 绑定
this.spans[i].ondblclick = this.editTab;
this.sections[i].ondblclick = this.editTab;
}
}
updataNode() { // 获取动态添加的元素
this.lis = this.main.querySelectorAll('li') // 获取大盒子里面的li
this.sections = this.main.querySelectorAll('section')
this.remove = this.main.querySelectorAll('.icon-guanbi') // 获取关闭按钮
this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
// console.log(spans);
}
// 1.切换模块
toggleTab() { // 这里面的this 指向lis
// 排他思想，先清除所有样式
that.clearClassname()
// 点击哪个li给哪个li添加 类名
this.className = 'liactive'
that.sections[this.index].className = 'conactive'
}
// 清除样式
clearClassname() {
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].className = ''
this.sections[i].className = ''
}
}
// 2. 添加模块
addTab() { // 这里面的this 指向 tabadd
that.clearClassname()
// 创建li元素
var random = Math.random() // 获取一个随机数字
var li = ` <li class="liactive"><span>新选项</span><span class="iconfont icon-guanbi"></span></li> `
var section = `<section class="conactive">${random}</section>`
// 把li元素追加到ul里面
// insertAdjacentHTML(position,text)
// 第一个元素是追加元素的位置，第二个元素表示添加的文本内容
that.ul.insertAdjacentHTML('beforeend', li)
that.fsection.insertAdjacentHTML('beforeend', section)
that.init() // 添加完元素后，让页面重新加载一次
}
// 3. 删除模块
removeClass(e) { // this指向关闭按钮
e.stopPropagation(); // 阻止冒泡，防止触发li的点击事件
// 获取他父亲的索引号
var index = this.parentNode.index
console.log(index);
// 删除相对应的父元素
that.lis[index].remove()
that.sections[index].remove()
// 删除完之后再重新调用渲染一下页面函数
that.init()
// 但我们删除的不是选中状态的按钮时，原来的li保持不变
if (document.querySelector('.liactive')) return
// 当我们删除了选中状态时，让前一个li 处于选中状态
index--
// 手动做点击事件 ；第一数值为真则调用第二个函数
that.lis[index] && that.lis[index].click()
}
// 4. 修改功能
editTab() { // this 指向sapn
// 设置默认文本框样式
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()
// 当我们离开之后，让文本框里面的内容给span
// onblur 失去焦点
input.onblur = function () { // 这里面的this指向input
this.parentNode.innerHTML = this.value
}
// 按下回车键也可以把文本框里面的值给span
input.onkeyup = function (e) {
if (e.keyCode === 13) {
// 手动调用表单失去焦点事件 不需要鼠标离开
this.blur();
}
}
}
}
new Tab('#tab')
网友评论