简易后台效果

最新推荐文章于 2024-07-11 15:54:07 发布

HAI6545

最新推荐文章于 2024-07-11 15:54:07 发布

阅读量284

点赞数 2

分类专栏： JavaScript案例文章标签： webview elementui vue.js

本文链接：https://blog.csdn.net/HAI6545/article/details/122498904

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏

<!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>管理信息</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="box">
        <div class="header">
            <div class="top_fl">后台管理系统</div>
            <div class="top_ri"></div>
        </div>
        <div class="body">
            <div class="body_fl">
                <div class="b_fl">个人资料</div>
                <div class="b_fl">相册管理</div>
                <div class="b_fl">日志管理</div>
                <div class="b_fl">留言管理</div>
                <div class="b_fl">风格管理</div>
                <div class="b_fl">系统管理</div>
                <div class="b_fl">帮助信息</div>
            </div>
            
            <div class="body_ri">欢迎使用管理系统！</div>
        <div class="foot"></div>
    </div>
</body>
<script src="./js/index.js"></script>
</html>

* {
    margin: 0;
    padding: 0;
    user-select: none;
}
html,body {
    height: 100%;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 900px;
}
.header {
    width: 900px;
    height: 40px;
    display: flex;
}
.top_fl {
    width: 150px;
    height: 40px;
    background-color: #aaa;
    text-align: center;
    line-height: 40px;
    font-weight: 900;
}
.top_ri {
    width: 750px;
    height: 40px;
    background-color: #ccccc0;
    display: flex;
}

.body {
    height: 500px;
    width: 900px;
}

.body_fl {
    width: 150px;
    height: 500px;
    background-color: #ddd;
    float: left;
    cursor: pointer;
}

.body_fl .b_fl {
    width: 130px;
    height: 30px;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    margin: 15px auto;
}

.body_ri {
    width: calc(100% - 150px);
    height: 500px;
    background-color: floralwhite;
    float: right;
    text-align: center;
    font-weight: 900;
}
/* .body .atv {
    display: block;
} */


.foot {
    width: 900px;
    height: 30px;
    background-color: #ccccc0;
}
.top_ri .atv {
    background-color: pink !important;
}

function System () {
    //点击左侧的内容，在上面创建一个一模一样的标签，单独设置一下样式
    //如果点击的标签上面已经存在了，就不需要创建了，直接切换到
    //上面创建好的标签，且还是高亮的状态,点击的时候判断是否有标记，没标记
    //就创建标记，且复制标签放到上面,如果有标记，就直接跳转到上面的标签
    this.fl = document.querySelector('.body_fl');
    this.fl.className = 'body_fl box'
    console.dir(this.fl);
    this.top_ri = document.querySelector('.top_ri');
    this.click();
    this.clickk();

}
//点击事件方法
System.prototype.click = function () {
    //事件委托
    this.fl.onclick = () => {
        const target = window.event.target;
        if(target.className === 'b_fl') {
            //判断
            this.sense(target);
        }
    }
}

System.prototype.sense = function (target) {
    if (!target.getAttribute('id')) {
        target.setAttribute('id',+new Date());
        let kr = target.cloneNode(true);
        this.top_ri.appendChild(kr);
        this.Style(kr,{
            width : '100px',
            height : '40px',
            backgroundColor : '#fc0',
            textAlign: 'center',
            lineHeight: '40px',
            fontWeight: '500',
            marginRight : '5px'
        });
        //创建元素
        this.creator(kr);
    }
    // else if(target.getAttribute('id') == this.top_ri.children.getAttribute('id')) {
    //     console.log(2)
    // }

    else {
        let id = target.getAttribute('id');
        for(let i = 0; i < this.top_ri.children.length; i++) {
            for (let j = 0; j < this.top_ri.children.length; j++) {
                this.top_ri.children[i].className = 'b_fl'
            }
            if(id == this.top_ri.children[i].getAttribute('id')) {
                // this.top_ri.children[i].className = 'b_fl atv'
                this.top_ri.children[i].classList.add('atv')
            }
        }
    }
}
//创建span标签
System.prototype.creator = function (res) {
    let img = document.createElement('img');
    
    img.setAttribute('src','https://hovertree.com/hvtimg/bjafje/wy6cv9nl.gif');
    this.Style(img,{
        width : '14px',
        height : '14px',
    });
    res.appendChild(img)
};
//点击img
System.prototype.clickk = function () {
    this.top_ri.onclick = () => {
        const target = window.event.target;
        if(target.className === 'b_fl') {
            //判断
            for(let i = 0; i < this.top_ri.children.length; i++) {
                this.top_ri.children[i].className = 'b_fl';
            }
            target.className = 'b_fl atv'
        }
        if(target.tagName === 'IMG') {
            console.log()
            for(var i = 0; i < this.fl.children.length; i++) {
                if(target.parentElement.getAttribute('id') == this.fl.children[i].getAttribute('id')) {
                    this.fl.children[i].removeAttribute('id');
                }
            }
            target.parentNode.parentNode.removeChild(target.parentNode);
        }
    }
}
//设置样式的方法
System.prototype.Style = function (ele,obj) {
    for(var key in obj) {
        ele.style[key] = obj[key];
    }
}

new System();

HAI6545

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
简易后台效果

<!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>管.
复制链接

扫一扫