使用面向对象功能，增，删，改

最新推荐文章于 2023-12-10 16:18:40 发布

susu1198

最新推荐文章于 2023-12-10 16:18:40 发布

阅读量122

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47558015/article/details/116802580

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这篇博客介绍了一种使用JavaScript面向对象编程方法来动态添加和管理标签页的实现方式。通过创建一个Tab类，实现了添加、切换、删除和编辑标签页的功能，同时也包含了事件绑定和DOM操作。示例代码展示了如何在HTML结构中动态插入和更新li及section元素，以实现标签页的增删改查操作。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
</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 src="js/tab.js"></script>
</body>

</html>


// 声明一个全局变量
var that;
// 创建一个类
class Tab {

    constructor(id) {
        that = this; //接收constructor的this
        this.main = document.querySelector(id);

        // 点击按钮添加 获取元素
        this.add = this.main.querySelector('.tabadd')
            // 获取fisrstnav的第一个子节点
        this.ul = this.main.querySelector('.fisrstnav ul:first-child');
        // tabscon
        this.tabscon = this.main.querySelector('.tabscon')
            // 调用初始化
        this.init()
    }

    // 初始化 写入所有的绑定事件
    init() {
            // 调入新生成的 li 和section
            this.updateNode();
            // 点击按钮事件
            this.add.onclick = this.addTab;
            // 切换tab栏事件
            for (var i = 0; i < this.lis.length; i++) {
                // 获取索引号
                this.lis[i].index = i
                this.lis[i].onclick = this.toggleTab;
                // 因为小×号每个li都有所以绑定到li里面
                this.remove[i].onclick = this.removeTob;
                // 更改数据
                this.spans[i].ondblclick = this.editTob;
                this.section[i].ondblclick = this.editTob;
            }
        }
        // 新生成的li 和section
    updateNode() {
            this.lis = this.main.querySelectorAll('li');
            this.section = document.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);// 获取索引值
            // 调用
            that.clearTob()
            this.className = 'liactive';
            that.section[this.index].className = 'conactive';
        }
        // 清除
    clearTob() {
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].className = ''
                this.section[i].className = ''
            }
        }
        // 添加功能
    addTab() {
            // alert(111) //绑定成功
            that.clearTob()
                // 生成一个随机数，便于辨认新的
            var random = Math.random();
            // 添加 li
            var li = '  <li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'
                // 添加 section
            var section = ' <section class="conactive">测试' + random + '</section>'
            that.ul.insertAdjacentHTML('beforeEnd', li)
            that.tabscon.insertAdjacentHTML('beforeEnd', section);
            that.init()
        }
        // 删除功能
    removeTob(e) {
            // alert(1) //测试绑定事件是否生效
            e.stopPropagation(); //阻止事件冒泡
            var index = this.parentNode.index;
            // console.log(index);
            // 点击索引值删除
            that.lis[index].remove();
            that.section[index].remove();
            that.init()
                // 如果你删除的li不是选定状态的时候就不执行下面的，如果不是执行
            if (document.querySelector('.liactive')) return;
            index--;
            // 你有对应的li的索引值吗？ 如果有就给它做点击事件，如果没有就不做了
            that.lis[index] && that.lis[index].click();
        }
        // 修改功能
    editTob() {
        // 获取原本的文本
        var str = this.innerHTML;
        // 双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        // alert(1)
        this.innerHTML = '<input type="text" >' //添加一个新的input表单
        var input = this.children[0]; //获取它的文本值
        // console.log(input);
        input.value = str; //把之前的文本值给input；
        // console.log(input);
        input.select(); //文本框处于选定状态，可以全选
        // 当失去焦点是八更改的值重新baocun
        input.onblur = function() {
                this.parentNode.innerHTML = this.value;
            }
            // 按下回车键保存
        input.onkeyup = function(e) {
            // console.log(e.keyCode); //获取回车键的阿斯克码值 13
            if (e.keyCode === 13) {
                this.blur(); //直接使用失去焦点事件
            }
        }

    }
}
new Tab('#tab')