js高级-类和对象-实例

接下来，做一个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();
                    }
                }