【Pink老师es6】JavaScript 面向对象tab栏案例

最新推荐文章于 2023-01-31 18:24:08 发布

奶油味的泡芙

最新推荐文章于 2023-01-31 18:24:08 发布

阅读量1.3k

点赞数 1

文章标签：前端 es6 javascript

本文链接：https://blog.csdn.net/qq_53385064/article/details/124612531

版权

利用面向对象对tab栏进行切换功能、添加功能、删除功能和修改功能

HTML代码：

<body>
    <main>
        <h4>
            JS 面向对象 动态添加标签
        </h4>
        <div class="tabbox" id="tab">
            <!-- 头部 -->
            <nav class="firstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="close"><i>+</i></span></li>
                    <li><span>测试2</span><span class="close"><i>+</i></span></li>
                    <li><span>测试3</span><span class="close"><i>+</i></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>
            <!-- body -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>
</body>

CSS代码：

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

main {
    margin: 100px auto;
}

h4 {
    font-size: 20px;
    text-align: center;
}

.tabbox {
    position: relative;
    margin: 40px auto;
    width: 900px;
    border: 1px solid orangered;
}

.firstnav {
    position: relative;
    height: 50px;
    padding: 0;
}

.firstnav ul {
    position: absolute;
    top: 0;
    left: 0;
}

.firstnav ul li {
    position: relative;
    float: left;
    width: 80px;
    height: 50px;
    padding: 0 10px;
    font-size: 16px;
    text-align: center;
    list-style: none;
    border-right: 1px solid #999;
}

.firstnav ul li span:first-child {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 80px;
    height: 30px;
    line-height: 30px;
}

.firstnav ul li span:first-child input {
    padding: 0 2px;
    width: 72px;
    height: 30px;
    border: 2px solid skyblue;
    outline-color: skyblue;
}

.firstnav .liactive {
    border-bottom: 1px solid #fff;
}

.firstnav ul li .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    line-height: 8px;
    font-size: 8px;
    color: #fff;
    background-color: #000;
    border-bottom-left-radius: 10px;
    cursor: pointer;
}

.firstnav ul li .close i {
    display: block;
    font-style: normal;
    transform: rotate(45deg);
}

.tabadd {
    position: absolute;
    right: 10px;
    top: 15px;
    width: 15px;
    height: 15px;
    text-align: center;
    border: 1px solid #999;
    cursor: pointer;
}

.tabadd span {
    display: block;
    width: 15px;
    height: 15px;
    color: #666;
    line-height: 12px;
}

.tabscon {
    height: 300px;
    padding: 20px;
    border-top: 1px solid #999;
}

.tabscon section {
    height: 300px;
    display: none;
}

.tabscon .conactive {
    display: block;
}

.tabscon section input {
    box-sizing: border-box;
    padding: 10px;
    width: 860px;
    height: 300px;
    border: 2px solid skyblue;
    outline-color: skyblue;
}

1、切换功能

利用排他思想，清除其他li的样式，点击当前li会切换成选定状态

 //1、切换功能   注意：toggleTab里边的this指向的是li
    toggleTab() {
        that.clearClass();
        this.className = "liactive";
        that.sections[this.index].className = "conactive";
    }

2、添加功能

在这里没用使用老师创建选定状态li和section的方法，所以前边没有调用清除样式的功能

 addTab() {
        //（1）创建li元素和section元素
        var li = '<li><span>新选项卡</span><span class="close icon-guanbi"><i>+</i></span></li>';
        var section = '<section>新内容</section>';
        //（2）把这两个元素追加到对应的父元素里边
        that.ul.insertAdjacentHTML("beforeend", li);
        that.fsection.insertAdjacentHTML("beforeend", section);
        that.init();
    }

3、删除功能

在这里添加了一个老师没有补充的bug，就是当删除索引号为0的选定状态的li时，tab栏将没有选定状态的li

removeTab(e) {
        e.stopPropagation();    //阻止冒泡，防止触发li的点击切换事件
        var index = this.parentNode.index;
        //根据索引号删除对应的li和section
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        //当删除的不是选定状态的li时，那么原来选定状态的li保持不变
        if (document.querySelector(".liactive")) return;
        //当删除了选定状态索引号为0的li时，让后一个元素变为选定状态
        if (index == 0) {
            that.lis[index].click();
        }
        //当删除了选定状态的li时，让前一个li变为选定状态
        index--;
        //自动调用点击事件，不需要鼠标点击触发
        that.lis[index] && that.lis[index].click();

    }

4、修改功能

这里可能会出现input表单过长问题，需要在CSS里边提前添加好需要的input表单的样式

editTab() {
        var str = this.innerHTML;
        //双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        //生成input表单
        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
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        }
    }

整体的JavaScript代码：

var that;
class Tab {
    constructor(id) {
        that = this;
        //获取元素
        this.main = document.querySelector(id);
        this.add = this.main.querySelector(".tabadd");
        this.ul = this.main.querySelector(".firstnav ul:first-child");
        this.fsection = this.main.querySelector(".tabscon");
        this.init();
    }
    init() {
        this.updateNode();
        //init 初始化操作，让相关的元素绑定事件
        this.add.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.closes[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab;    //ondblclick 双击事件
            this.sections[i].ondblclick = this.editTab;
        }
    }
    //动态获取所有的li和section
    updateNode() {
        this.lis = this.main.querySelectorAll("li");
        this.sections = this.main.querySelectorAll("section");
        this.closes = this.main.querySelectorAll(".close");
        this.spans = this.main.querySelectorAll(".firstnav li span:first-child");
    }
    //1、切换功能   注意：toggleTab里边的this指向的是li
    toggleTab() {
        that.clearClass();
        this.className = "liactive";
        that.sections[this.index].className = "conactive";
    }
    //清除其他样式，显示当前样式     注意：clearClass是用that来调用的，所以里边的this指向没问题
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = "";
            this.sections[i].className = "";
        }
    }
    //2、添加功能
    addTab() {
        //（1）创建li元素和section元素
        var li = '<li><span>新选项卡</span><span class="close icon-guanbi"><i>+</i></span></li>';
        var section = '<section>新内容</section>';
        //（2）把这两个元素追加到对应的父元素里边
        that.ul.insertAdjacentHTML("beforeend", li);
        that.fsection.insertAdjacentHTML("beforeend", section);
        that.init();
    }
    //3、删除功能
    removeTab(e) {
        e.stopPropagation();    //阻止冒泡，防止触发li的点击切换事件
        var index = this.parentNode.index;
        //根据索引号删除对应的li和section
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        //当删除的不是选定状态的li时，那么原来选定状态的li保持不变
        if (document.querySelector(".liactive")) return;
        //当删除了选定状态索引号为0的li时，让后一个元素变为选定状态
        if (index == 0) {
            that.lis[index].click();
        }
        //当删除了选定状态的li时，让前一个li变为选定状态
        index--;
        //自动调用点击事件，不需要鼠标点击触发
        that.lis[index] && that.lis[index].click();

    }
    //4、修改功能
    editTab() {
        var str = this.innerHTML;
        //双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        //生成input表单
        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
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        }
    }
}
new Tab("#tab");

奶油味的泡芙

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
【Pink老师es6】JavaScript 面向对象tab栏案例

目录HTML代码：CSS代码：1、切换功能2、添加功能3、删除功能4、修改功能整体的JavaScript代码：利用面向对象对tab栏进行切换功能、添加功能、删除功能和修改功能HTML代码：<body> <main> <h4> JS 面向对象动态添加标签 </h4...
复制链接

扫一扫