仿微博添加推荐_微博的兴趣推荐页面-CSDN博客

本文链接：https://blog.csdn.net/weixin_53374733/article/details/127000001

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 320px;
            height: 568px;
            border: 1px solid black;
        }

        h2 {
            height: 36px;
            line-height: 36px;
            text-indent: 20px;
            font-size: 20px;
            color: #333;
            background-color: tomato;
        }

        .tags {
            padding: 10px;
            background-color: #eee;
            overflow: hidden;
        }

        span {
            float: left;
            margin: 2.5px;
        }

        .my-tag span,
        .tj-tag span {
            width: 70px;
            height: 36px;
            line-height: 36px;
            background-color: #ddd;
            text-align: center;
        }

        .my-tag span .del:hover {
            cursor: pointer;
        }

        .tj-tag span {
            box-sizing: border-box;
            border: 1px dashed black;
        }

        .tj-tag span:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2>我的标签</h2>
        <div class="tags my-tag">
            <!-- <span>
                <strong class="del">x</strong>
                <strong>同城</strong>
            </span> -->
        </div>
        <h2>推荐标签</h2>
        <div class="tags tj-tag">
            <!-- <span>同城</span> -->
        </div>
    </div>
</body>
<script>
    // 数据
    var data = ['同城', '抗疫', '财经', '读书', '摄影', '电影', '体育', '综艺', '时尚', '星座', '故事', '房产', '家居', '萌宠', '科普', '动漫', '艺术', '美妆', '音乐', '法律', '设计', '历史', '瘦身', '游戏', '校园', '抽奖', '育儿', '婚恋', '吃鸡', '王者', '教育', '养生']

    var tjTag = document.querySelector(".tj-tag")
    var myTag=document.querySelector(".my-tag")
    for (var i = 0; i < data.length; i++) {
        var span = document.createElement('span')
        span.index=i;   //下标用来与我的标签下标来对应
        span.innerHTML = '+'+data[i];
        tjTag.appendChild(span)

        span.onclick=function(){
            //+同城
            createMyTag(this.innerHTML.slice(1),this.index)
            // 让自己消失掉
            this.style.display='none'
        }
    }

    // 新生成死亡我的tag的index与推荐的tag的index一一对应
    function createMyTag(info,index){
        var span=document.createElement('span')
        span.index=index
        span.innerHTML=`
                <strong class="del">x</strong>
                <strong>${info}</strong>
        `;
        
        myTag.appendChild(span)
        var del=span.querySelector(".del")
        del.onclick=function(){
            // 删掉自己，对应的推荐标签要显示出来
            var index=this.parentNode.index;   //对应标签的下标
            tjTag.children[index].style.display='block'

            this.parentNode.parentNode.removeChild(this.parentNode)

        }
    }
</script>

</html>