js面向对象运用 tab栏切换

最新推荐文章于 2024-05-17 03:16:20 发布

zzzzzzrrryyy

最新推荐文章于 2024-05-17 03:16:20 发布

阅读量353

点赞数

分类专栏： js相关

本文链接：https://blog.csdn.net/qq_43194919/article/details/107701773

版权

js相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

可添加，删除tab栏，可对tab栏的标题和内容双击进行修改
在这里插入图片描述

html代码：

<body>
    <div class="tabsbox" id="tab">
        <!-- tab标签 -->
        <nav class="firstnav">
            <ul>
                <li class="liactive"><span>测试1</span><span class="close">&times;</span></li>
                <li><span>测试2</span><span class="close">&times;</span></li>
                <li><span>测试3</span><span class="close">&times;</span></li>
                <button>+</button>
            </ul>

        </nav>
        <!-- tab内容 -->
        <div class="tabscon">
            <br>
            <section class="conactive"><span>测试1</span></section>
            <section><span>测试2</span></section>
            <section><span>测试3</span></section>
        </div>
    </div>
</body>

js代码：

var that;
class Tab {
    //每new一个对象 constructor会自动执行
    constructor(id) {
        that = this;
        //获取元素
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('button');
        this.ul = this.main.getElementsByTagName('ul')[0];
        //注意下面这种用法
        //this.ul = this.main.querySelector('.firstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon');
        this.init();
    }

    //方法
    //初始化 给每一个tab一个index和一个点击事件
    init() {
        //重新获取所有的li和section
        this.updateNode();
        this.add.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            //这里不能给toggletab方法加小括号 
            //加了的话页面一加载就会执行
            this.lis[i].onclick = this.toggleTab;
            this.remove[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }
    }

    updateNode() {
        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
        this.remove = this.main.querySelectorAll('.close');
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
    }

    //清除标签的所有类
    clearClassName() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }

    //切换
    toggleTab() {
        //这里面的this指的是lis，因为是lis调用了toggletag方法
        //lis中没有sections属性所以这里不是用this.sections而是用that.sections来调用实体类中的srctions
        //lis中也没有clearclassname方法 所以这里是用that来调用实体类中的clearclassname方法
        console.log(this.index);
        that.clearClassName();
        this.className = 'liactive';
        that.sections[this.index].className = 'conactive';
    }

    //添加
    addTab() {
        //alert(1);
        //创建li元素和section元素
        that.clearClassName();
        var li = '<li class="liactive"><span>新增加的</span><span class="close">&times;</span></li>';
        var section = '<section class="conactive">新增加的</section>';
        //追加到父元素里面
        //这里使用了新的方法insertadjacenthtml
        that.ul.insertAdjacentHTML('beforeend', li);
        console.log(that.fsection);
        that.fsection.insertAdjacentHTML('beforeend', section);
        that.init();
    }

    //删除
    removeTab(e) {
        //当点击叉号时，会触发父元素即li元素的点击事件
        //所以这里需要阻止冒泡
        e.stopPropagation();
        var index = this.parentNode.index;
        console.log(index);
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        //当删除的不是处于选定状态的li时 原来处于选定状态的li保持不变
        //判断是否有li处于选定状态 如果有 则直接删除 不执行后面的
        if (document.querySelector('.liactive')) {
            return;
        }
        //如果没有（代表此时删除的是处于选定状态的li）则执行后面的 
        else {
            //当删除处于选中状态的li的时候，让它的前一个li处于选定状态
            index--;
            //这个click（）手动调用点击事件 不需要鼠标点击触发
            //这里&&表示前面的为真时才执行后面的 否则不执行
            that.lis[index] && that.lis[index].click();
        }
    }

    //编辑
    editTab() {
        //获取原来的内容
        var str = this.innerText;
        //双击禁止选中文字
        window.getSelection ? window.getSelection().removeAllRanges : document.selection.empty();
        //alert("222");
        //双击后生成文本框
        this.innerHTML = '<input type="text" style="width:90%;height:90%"/>';
        var input = this.children[0];
        input.value = str;
        //让文本框中的文字处于选定状态
        input.select();
        //当焦点离开文本框就把文本框里的内容给span
        //当鼠标失去焦点
        input.onblur = function() {

            //这里的this指的是input
            this.parentNode.innerHTML = this.value;
        }

        //按下回车把文本框里的值给span
        input.onkeyup = function(e) {
            if (e.keyCode === 13) {
                //blur()手动调用失去焦点事件 不需要鼠标触发
                this.blur();
            }
        }
    }
}
new Tab('#tab');

zzzzzzrrryyy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js面向对象运用 tab栏切换

可添加，删除tab栏，可对tab栏的标题和内容双击进行修改html代码：<body> <div class="tabsbox" id="tab">  <nav class="firstnav"> <ul> <li class="liactive"><span>测试1</span>&lt
复制链接

扫一扫

专栏目录