模拟qq下拉列表 js

最新推荐文章于 2021-06-18 08:53:08 发布

zh_1130

最新推荐文章于 2021-06-18 08:53:08 发布

阅读量231

点赞数

文章标签：自定义索引使用模拟qq

本文链接：https://blog.csdn.net/zh_1130/article/details/99090500

版权

利用循环和自定义索引
1.先写html代码，结构如下：

 <div class="contenier">
        <div class="row1">
            <div class="nav sanjiao">朋友</div>
            <div class="content "></div>
        </div>
        <div class="row2">
            <div class="nav sanjiao">家人</div>
            <div class="content "></div>
        </div>
        <div class="nav sanjiao">陌生人</div>
        <div class="content "></div>
    </div>

2.简单的css样式

 * {
            margin: 0;
            padding: 0;
        }

        .contenier {
            width: 200px;
            height: auto;
            margin: 100px auto;
            border: 1px solid #000;
        }

        .row1,
        .row2,
        .row3 {
            width: 100%;

            height: auto;
        }

        .nav {
            width: 100%;
            background-color: antiquewhite;
            height: 30px;
        }

        .content {
            background-color: #fff;
            display: none;

        }
        .sanjiao::before{
            content: '';
            display: inline-block;
            width: 0;
            border-width: 5px ;
            border-style: solid;
            border-color: transparent transparent  transparent black;
            margin-left :3px;
        }
        .xia::before{
            content: '';
            display: inline-block;
            width: 0;
            border-width: 5px ;
            border-style: solid;
            border-color: black transparent transparent  transparent ;
            margin-left :3px;
        }

3.js（通过循环给每个div动态添加内容，根据循环和索引显示）

 <script>
        var row1 = document.getElementsByClassName("row1")[0];
        var row2 = document.getElementsByClassName("row2")[0];
        var row3 = document.getElementsByClassName("row3")[0];
        var content = document.getElementsByClassName("content");
        var nav = document.getElementsByClassName("nav");
        var sanjiao =document.getElementsByClassName("sanjiao");
        var xia=document.getElementsByClassName("xia");
        str = "";
        for (var i = 0; i < 3; i++) {
            str += "<p></p>";
        }
        content[0].innerHTML = str;
        content[1].innerHTML = str;
        content[2].innerHTML = str;
        var p = document.getElementsByTagName("p");
        for (var i = 0; i < p.length; i++) {
            p[i].innerHTML += "张珊";
        }
        //    var bool=true;
        for (var i = 0; i < content.length; i++) {
            nav[i].index=i;
            
            nav[i].onclick = function () {
              for(var i=0;i<content.length;i++){
                content[i].style.display = "none";
                nav[i].className="sanjiao nav";
              }

              content[this.index].style.display = "block"; 
               this.className="xia nav";
            }
        }

    </script>