JavaScript面向对象简单Tab切换-

**

废话不说,看代码

**

html代码:

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Tab栏特效</title>
<style>
* {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

a {
    text-decoration: none
}

input {
    outline: none;
}

#Tab {
    position: relative;
    width: 900px;
    height: 500px;
    margin: 40px auto;
    border: 1px solid #000
}

#ul {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #000000
}

#ul li {
    position: relative;
    float: left;
    width: 90px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: none;
    border-right: 1px solid #000000;
    cursor: pointer
}

#ul>li span:first-child {
    display: inline-block;
    width: 100%;
    color: #000
}

#ul>li span:nth-child(2) {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 30px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    border: 1px solid #000000;
    background-color: pink;
    color: #000;
}

#ul>li span input {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 82px;
    height: 30px;
    outline: none;
}

#ul .bottom-class {
    border-bottom: 1px solid #ffffff
}

#nei-div {
    width: 100%;
    height: 200px;
    padding-top: 30px;
    padding-left: 30px;
}

#nei-div div {
    display: none;
    width: 100%;
    height: 100%;
    font-size: 24px;
}

#nei-div .none-div {
    display: block
}

#a-btn {
    position: absolute;
    top: -13px;
    right: 80px;
    font-size: 50px
}

#nei-div>div input {
    width: 100%;
    height: 100%;
}

</style>
</head>

<body>
<div id="Tab">
<ul id="ul">
<li class="bottom-class"><span>1</span><span>X</span></li>
<li><span>2</span> <span>X</span></li>
<li><span>3</span> <span>X</span></li>
<li><span>4</span> <span>X</span></li>
</ul>
<div id="nei-div">
<div class="none-div">内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
<a href="javascript:;"id="a-btn">+</a>
<div id="app"></div>
</div>
</body>
<script src="js/tab.js"></script>

</html>

js代码:

var ther;

class Tab {
    //获取元素
    constructor(id) {
        ther = this;
        this.tab = document.querySelector(id);
        this.add = this.tab.querySelector("#a-btn");
        this.ul = document.querySelector("#ul");
        this.neidiv = document.querySelector("#nei-div")
        this.inon();
    }

    //动态生成,需要重新获取元素
    getElement() {
        this.lis = this.tab.querySelectorAll("li");
        this.divs = document.querySelector("#nei-div").querySelectorAll("div");
        this.span = document.querySelector("#ul").querySelectorAll(" li span:nth-child(2)");
    }

    inon() {
        //重新调用获取元素
        this.getElement();
        //a-btna链接添加选项按钮
        this.add.onclick = this.addTab;
        //首先是所用li便利,其他元素也可借li便利
        for (var i = 0; i < this.lis.length; i++) {
            //为了点击每个li所对应的内容元素div,所以先设置一个index给div做索引号
            this.lis[i].index = i;
            //每个li做点击事件,调用toogleTab
            this.lis[i].onclick = this.toogleTab;
            //每个span删除选项做点击事件,调用deleteOption
            this.span[i].onclick = this.deleteOption;
            //每个li的第一个子元素节点span做双点击事件 调用inputModify
            this.lis[i].children[0].ondblclick = this.inputModify;
            //每个内容div做双点击事件 调用inputModeify
            this.divs[i].ondblclick = this.inputModify;
        }
    }

    //去除类功能
    deleteClass() {
        for (var i = 0; i < ther.lis.length; i++) {
             //所有li选项以及对应的内容“去除类”
            ther.lis[i].className = "";
            ther.divs[i].className = "";
        }
    }

    //添加类功能
    toogleTab() {
        ther.deleteClass();
        //所有选项li以及对应的内容的元素"添加类"
        this.className = "bottom-class";
        ther.divs[this.index].className = "none-div";

    }

    //添加功能
    addTab() {
        //调用delteClass去除类
        ther.deleteClass();
        //用字符串的形式创建li元素以及它对应的内容元素div
        var li = '<li class="bottom-class"><span>1</span><span>X</span></li>',
            div = '<div class="none-div">内容1</div>';
        //由于是addTab是add调用的,而add里没有ul,所以利用把this赋值给ther的全部变量来操作
        ther.ul.insertAdjacentHTML("beforeend", li);
        //这里依然是借用ther这个全局变量
        ther.neidiv.insertAdjacentHTML("beforeend", div);
        //由于以上是新创建选项的代码,所以之前选项点击事件并没有算上新创建的,所以在此调用inon(),
        //里面有重新调取所以选项li以及其他相关元素
        ther.inon();
    }

    //点击span删除li及其对应的div内容功能
    deleteOption(e) {
        //防止事件冒泡。参数.stopPropagation();
        e.stopPropagation();
        //获取当前span父亲li的索引号赋值给变量index
        var index = this.parentNode.index;
        //删除这个索引号相对应的li以及后面索引号所对应的div
        ther.lis[index].remove();
        ther.divs[index].remove();
        //再次调用inon();防止后面所创建的落下
        ther.inon();
        //如果删除某一个选项,其中有选中状态的,就执行return,依旧是当前选中状态,return后面的代码不执行
        if (document.querySelector(".bottom-class")) return;
        //防止删除最后一个选项出现错误!!!,如果删除的是当前选项,就索引号index--,
        index--;
        //index--后如果有当前index--所对应的li 则执行后面给当前删除选项的前一项做点击事件不用加on
        ther.lis[index] && ther.lis[index].click();

    }

    //修改功能
    inputModify() {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        //如果当前的span有子元素,那么条件为true,则执行return,return后面代码就都不执行
        if (this.children[0]) return;
        //当前span的文本内容赋值给一个变量
        var str = this.innerHTML;
        //在当前span里用字符串的形式创建一个input元素
        this.innerHTML = '<input type="text"/>';
        //获取当前那个创建的input元素,用父元素.children[子元素索引号]方法
        var input = this.children[0];
        //把当前span的文本内容赋值给创建的input.value
        input.value = str;
        //select()方法为文字选中
        input.select();
        //当input失去焦点时把它的value内容赋值给它的父亲span,用子元素.parentNode
        input.onblur = function() {
            this.parentNode.innerHTML = this.value;
        }
        //input做键盘事件,如果按住的是键盘键(13)再次调用blur(也就是onblur事件,注意再次调用不要on)
        input.onkeyup = function(e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        }
    }

}

new Tab("#Tab");
var ul = document.querySelector("#ul").querySelectorAll("li sapn:nth-child(2)");
console.log(ul);
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页