js对象应用

最新推荐文章于 2022-09-19 19:41:17 发布

vcdd

最新推荐文章于 2022-09-19 19:41:17 发布

阅读量229

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_44247157/article/details/124333939

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            position: relative;
            margin: 0;
            padding: 0;

        }
        li {
            /* position: relative; */
            list-style: none;
            width: 100px;
            height: 100%;
            font-size: 20px;
            line-height: 100%;

        }
        h4 {
         text-align: center;
        }
        .firstnav {
            position: relative;
            height: 60px;
            border-bottom:1px red solid ;
            padding-left: 20px;
        }
        .firstnav ul {
            padding: 0;
            display: flex;
            justify-content: start;
            padding-top:10px ;

        }
        .firstnav ul span {
        
            height: 60px;
            width: 100px;
            border: 1px red solid;
        }

        .firstnav ul .iconfont {
            position: absolute;
            top: -16;
            left: 46;
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;

        }
        .firstnav div {
            position: relative;
            right: -941px;
            top: -45px;
            font-size: 30px;

        }
        .firstnav div span {
            text-align: center;
            line-height: 30px;
            display: block;
            height: 30px;
            width: 30px;
            border: 1px solid red;
        }
        .main {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: 1px red solid;
            padding: 0;
        }
        .tabscon {
            padding:20px ;
        }
        .liactive {
            background-color: #666;
        }
        section {
            display: none;
        }
        .conactive {
            display: block;

        }
        input {
            width: 60px;
        }
    </style>
    
</head>

<body>
    <h4>js 面向对象 动态添加标签页</h4>
    <div class="main"  id="tab">
        <nav class="firstnav">
        <ul>
            <li class="listtive liactive"><span>测试1</span><span class="iconfont"></span></li>
            <li><span>测试2</span><span class="iconfont"></span></li>
            <li><span>测试3</span><span class="iconfont"></span></li>
        </ul>
        <div class="tabdd"><span>+</span></div>
        </nav>
        <div class="tabscon">
            <section class="conactive">测试1</section>
            <section>测试2</section>
            <section>测试3</section>
        </div>
    </div>
    <script>
    var that ;
class Tab {
    constructor(id){
        
        that = this ;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.add = this.main.querySelector('.tabdd');
        this.ul = this.main.querySelector('.firstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon');  
        this.init();
    }
    updateNode(){
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.iconfont');
        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');    
    }
    init(){
        //初始化操作  让相关元素绑定事件
        this.updateNode();
        for( var 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.add.onclick =  this.addTab;
        
    }
    //1.切换功能
    toggleTab(){
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.index].className = 'conactive';       
    }
    clearClass (){
        for(var i = 0 ;i <this.lis.length ; i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    //2.添加功能
    addTab(){
        that.clearClass();
        var li =' <li class="listtive liactive"><span>新选项卡</span><span class="iconfont"></span></li>';
        var section = '<section class="conactive">空白页</section>';
        that.ul.insertAdjacentHTML('beforeend',li);
        that.fsection.insertAdjacentHTML('beforeend',section);
        that.init();
    }
    //3.删除功能
    removeTab(e){
        e.stopPropagation();  //阻止冒泡
        var index = this.parentNode.index;
        console.log(index);
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        if(document.querySelector('.liactive')) return;
        index--;
        that.lis[index] && that.lis[index].click(); //&&若前面为真，调用后面的函数 若为假，不执行后面的函数
        //当我
    }
    //4.修改功能
    editTab(){
        var str = this.innerHTML;
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();    //双击禁止选定文字
        this.innerHTML = '<input type="text" />';
        var 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');

    </script>
</body>

</html>

注：

1.&&

that.lis[index] && that.lis[index].click(); //&&若前面为真，调用后面的函数若为假，不执行后面的函数

2.禁止选定文字

window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();

3.insertAdjacentHTML('position',text);

其中position取值如下：
‘beforebegin’：元素自身的前面。
‘afterbegin’：插入元素内部的第一个子节点之前。
‘beforeend’：插入元素内部的最后一个子节点之后。
‘afterend’：元素自身的后面。

vcdd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js对象应用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫