接下来,做一个tab栏切换的实例。
下面的这些复制粘贴。
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>
首先创建一个tab对象。
class Tab{}
new Tab();
接着在对象里面获取一些标签。
class Tab{
constructor(id) {
this.bigbox = document.querySelector(id);
this.lis = this.bigbox.querySelectorAll('li');
this.section = document.querySelectorAll('section');
}}
new Tab();
接下来写对象的方法,由于对象里面的方法中的this指向是这个方法的调用者,所以在全局变量定义that,在构造函数里面把this赋值给that。即:
var that;
class Tab{
constructor(id) {
that=this;
this.bigbox = document.querySelector(id);
this.lis = this.bigbox.querySelectorAll('li');
this.section = document.querySelectorAll('section');
}}
new Tab();
1-写tab栏切换思路:
当点击li标签的时候把类名给这个标签。同时把另外一个类名给下面的section标签。这里面需要用index来关联。同时,我们注意到,li标签里面是没有index这个属性的,需要添加上去。所以这么 写。
var that;
class Tab{
constructor(id) {
that=this;
this.bigbox = document.querySelector(id);
this.lis = this.bigbox.querySelectorAll('li');
this.sections = document.querySelectorAll('section');
this.init();
}}
实现tab切换:
1.先给每一个li添加index属性,同时给每个li绑定切换方法。
2.切换之前先清空类名。
init(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].index=i;
this.lis[i].onclick=this.toggle;
}
}
toggle(){
这个方法被li调用了所以this的指向是li;
that.clear();
this.className='';
that.sections[this.index].className='';
}
clear(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].className='';
That.section[i].className='';
}
}
new Tab('#tab');
同时写完以后需要在构造函数里面调用这些方法,所以当我们创造实例出来后,这些代码就会运行。
2-添加
this.addanniu=document.querySelector('.tabadd');
var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>'
var doucument.querySelector('.fiststnav ul:first-child').inserAdjacentHTML('beforeend',li);
添加之前要先清除一下样式:that.clear();
添加完后要重新绑定事件:that.init();
【扩展】随机数,Math第一个字母要大写:Math.random;
3-删除
this.guanbi=document.querySelectorAll('.icon-guanbi');
this.guanbi.οnclick=this.removetab;
因为guanbi的父亲li也有点击事件造成冒泡,所以添加点击事件e,并stopPropagation():
var index=this.parentNode.index;
that.lis[index].remove();
that.sections[index].remove();
删除完后要初始化,that.init();
index--;
that.lis[index].click();
if(document.querySelector('.liactive')) return;
4-编辑
禁止双击选中文字:
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var str = this.innerHTML;
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.onblur();
}
}