javascript 面向对象 Tab 案例

最新推荐文章于 2023-04-11 23:23:07 发布

大豹豹

最新推荐文章于 2023-04-11 23:23:07 发布

阅读量177

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/sinat_38324690/article/details/125623201

版权

1.主要有四个功能

（1）添加新的tab栏目

（2）删除tab栏目

（3）双击标题区域修改文字

（4）双击内容区域修改文字

2.抽取对象，分析功能模块

（1）抽取 tab 对象

（2）该对象具有切换功能

（3）该对象具有添加功能

（4）该对象具有删除功能

（5）该对象具有修改功能

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <h4>js 面向对象 动态添加标签页</h4>
        <div class="tabsbox" id="tab">
            <nav>
                <ul>
                    <li class="liactive"><span>测试1</span><button type="button" class="close">关闭</button></li>
                    <li class=""><span>测试2</span><button type="button" class="close">关闭</button></li>
                    <li class=""><span>测试3</span><button type="button" class="close">关闭</button></li>
                </ul>
                <div>
                    <button id="add">添加</button>
                </div>
            </nav>
            <div class="tabscon">
                 <section class="conactive">测试1</section>
                 <section class="">测试2</section>
                 <section class="">测试3</section>
            </div>
        </div>
    </main>
    <script src="index.js"></script>
</body>
</html>

css：

.tabsbox{
height:300px;
border:1px solid #d7d7d7
}
.tabsbox nav{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.tabsbox nav ul{
    display:flex;
    list-style:none;
}
.tabsbox nav ul li{
    padding: 10px 20px;
    justify-content:space-between;
    border-radius: 3px;
    cursor: pointer;
}
/*.tabsbox nav ul li span{
    -moz-user-select: none; !*火狐*!
    -webkit-user-select: none; !*webkit浏览器*!
    -ms-user-select: none; !*IE10*!
    -khtml-user-select: none; !*早期浏览器*!
    user-select: none;
}*/
.tabsbox nav ul li:hover{
    background-color:#f1f1f1;
}
.close{

    font-size: 12px;

    margin-left: 10px;
}
.tabscon{
    background-color:#eee;
    height:100%;
    padding: 20px;
}
.liactive{
    background-color:#dadada
}
.tabscon section{
    display: none;
    height:100%;
}
.conactive{
    display: block !important;
}

js

var that
class Tab{
    constructor(id) {
        //获取元素
        that = this
        this.main = document.querySelector(id)

        //li 的父元素
        this.uls = this.main.querySelector('#tab nav ul:first-child')
        //section 的父元素
        this.tabscons = this.main.querySelector('.tabscon')
        this.addtab = this.main.querySelector('#add')
        this.init()
    }
    init(){
        this.updateNode()
        //init 初始化操作让相关的元素绑定事件
        for (let i = 0; i < this.lis.length; i++){
            this.lis[i].index = i
            this.lis[i].onclick = this.toggleTab
            this.remove[i].onclick = this.removeTab
            this.spans[i].ondblclick = this.editTab
            this.sections[i].ondblclick = this.editTab
        }

        /*this.lis.forEach((item,idx) => {
            item.index = idx
            item.onclick = this.toggleTab
            item.remove.onclick = this.removeTab
        })*/

        this.addtab.onclick = this.addTab
    }
    //动态获取所有的 li 和 section
    updateNode(){
        this.lis = this.main.querySelectorAll('li')
        this.sections = this.main.querySelectorAll('section')
        this.remove = this.main.querySelectorAll('.close')
        this.spans = this.main.querySelectorAll('li span:first-child')
    }
    //切换功能
    toggleTab(){
        //console.log(this.index)
        that.clearClass()
        this.className = 'liactive'
        that.sections[this.index].className = 'conactive'
    }
    clearClass(){
        for (let i = 0; i < this.lis.length; i++){
            this.lis[i].className = ''
            this.sections[i].className = ''
        }
    }
    //添加功能
    addTab(){
        that.clearClass()
        const random = Math.random()
        //（1）创建 li 元素和 section
        const html_li = `<li class="liactive"><span>测试3</span><button class="close">关闭</button></li>`
        const section = `<section class="conactive">测试3${random}</section>`
        //（2）把这两个元素追加到对象的父元素里面
        that.uls.insertAdjacentHTML('beforeend', html_li)
        that.tabscons.insertAdjacentHTML('beforeend', section)
        that.init()
    }
    //删除功能
    removeTab(e){
        e.stopPropagation() //阻止冒泡
        let index = this.parentNode.index
        that.lis[index].remove()
        that.sections[index].remove()
/*        if(that.lis[index].className !== ''){
            index--
            //手动调用点击事件
            that.lis[index] && that.lis[index].click()
        }*/
        that.init()
        if(document.querySelector('.liactive')) return
        index--
        that.lis[index] && that.lis[index].click()
        //当删除了选的状态的 li 时，让前一个变成选定状态
    }
    //修改功能
    editTab(){
        const str = this.innerHTML
        //双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = '<input type="text">'
        const 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.blur()
            }
        }
    }
}
new Tab('#tab')

以面向对象的方式实现，主要作为个人案例记录，不做任何讲解。

大豹豹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 面向对象 Tab 案例

1.主要有四个功能（1）添加新的tab栏目（2）删除tab栏目（3）双击标题区域修改文字（4）双击内容区域修改文字2.抽取对象，分析功能模块（1）抽取 tab 对象（2）该对象具有切换功能（3）该对象具有添加功能（4）该对象具有删除功能（5）该对象具有修改功能...
复制链接

扫一扫