JavaScript面向对象--tab栏--增删改查操作
上面是我的代码
下面是我模仿的实例，可以自己加css变漂亮
面向对象--tab栏切换
功能需求：
1. 点击tab栏，可以切换效果。
2. 点击+号， 可以添加tab项和内容项目
3. 点击x号，可以删除当前的tab项和内容项
4. 双击tab项文字或者内容项文字，可以修改里面的文字内容。
抽取对象：Tab对象
1.该对象具有切换功能
2.该对象具有添加功能
3.该对象具有删除功能
4.该对象具有修改功能
增删改查
添加功能
1. 点击+可以实现添加新的选项卡和内容
2. 第一步：创建新的选项卡li和新的内容section
3. 第二步：把创建的两个元素追加到对应的父元素中
4. 以前的做法：动态创建createElement,但是元素里面内容较多，需要innerHTML赋值在appendChild追加到父元素里面。
5.现在的高级做法：利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
6. appendChild不支持追加字符串的元素，insertAdjacentHTML支持追加字符串的元素
删除功能
1. 点击×可以删除当前的li选项卡和当前的section
2. x是没有索引号的，但是它的父亲li有索引号，这个索引号正是我们想要的索引号
3. 所以核心思路是：点击叉号可以删除这个索引号对应的li和section
编辑功能
1. 双击选项卡li或者section里面的文字，可以实现修改功能
2. 双击事件是： ondblclick
3. 如果双击文字，会默认选定文字，此时需要双击禁止选中文字
4. window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();
5. 核心思路：双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车然后文本框输入的值给原先元素即可
留意+号，和×号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
display: none;
}
section.conactive{
display: block;
}
</style>
</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>
<script type="text/javascript">
var that;
class Tab{
constructor(id) {
//获取元素
that=this;
this.main=document.querySelector(id);
this.add=this.main.querySelector('.tabadd');
//li的父元素
this.ul=this.main.querySelector('.fisrstnav ul:first-child');
this.fsection=this.main.querySelector('.tabscon');
this.init();
}
init(){
this.updateNode();
this.add.onclick=this.addTab;
// init初始化操作让相关元素绑定事件
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;
}
}
//重新获取所有的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');
}
// 1.切换功能
toggleTab(){
// 添加类
// console.log(this.index);
// 因为是init调用toggleTag,init在constructor中,this指向问题,所以用that;
that.clearClass();
this.className='liactive';
that.sections[this.index].className='conactive';
}
//清除所有的li和section类
clearClass(){
for(var i =0;i<this.lis.length;i++){
this.lis[i].className='';
this.sections[i].className='';
}
}
//2.添加功能
addTab(){
that.clearClass();
var random=Math.random();
// 创建li元素和section元素
var li='<li class="liactive"><span>测试3</span><span class="iconfont icon-guanbi">×</span></li>';
var section='<section class="conactive">测试'+random+'</section>'
// 把这两个元素追加到对应的父元素里面
that.ul.insertAdjacentHTML('beforeend',li);
that.fsection.insertAdjacentHTML('beforeend',section);
that.init();
}
//3.删除功能
removeTab(e){
e.stopPropagation();
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的时候，让它的前一个li处于选定状态
index--;
//手动调用我们的点击事件
// &&是如果有这个实例就调用
that.lis[index] && that.lis[index].click();
}
//4.修改功能
editTab(){
var str=this.innerHTML;
//双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
// alert(11)
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 id="">
input.onkeyup=function(e){
if(e.keyCode===13){
//手动调用表单失去焦点事件，不需要鼠标离开操作
this.blur();
}
}
}
}
new Tab('#tab');
</script>
</body>
</html>
浙公网安备 33010602011771号