切换

1.结构

<div class="table">
    <div class="tab">
        <ul id="tab">
            <li class="current">账号登录</li>
            <li>扫码登录</li>
        </ul>
    </div>
    <div class="tab_content" id="tab_content">
        <div class="one">
            <p><input type="text"/></p>
            <p><input type="password"/></p>
        </div>
        <div class="two">
            ![](images/01.png)
        </div>
    </div>
</div>

2.样式

<style>
        *{margin:0;padding:0}
        .table{
            margin-left: auto;
            margin-right: auto;
            margin-top: 200px;
            width:350px;
            border:1px solid #333;
            text-align: center;
        }
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            line-height: 50px;
            cursor: pointer;
        }
        .tab{
            border-bottom: 1px solid #333;
        }
        .tab_content{
            position: relative;
            width:350px;
            height:200px;
        }
        .tab_content>div{
            position: absolute;
            width:350px;
            height:200px;
        }
        .two{
            display: none;
        }
        .one input{
            width:280px;
            height:30px;
            margin-top: 20px;
        }
        .current{
            color:orange;
        }
    </style>

3.行为

<script>
    var tabs=document.getElementById("tab").getElementsByTagName("li");
    var contents = document.getElementById("tab_content").children;
    //对标签li遍历实现点击事件,
    for(var i=0;i<tabs.length;i++){
    /*用value属性记录被点击的li的下标i*/
        tabs[i].value=i;
        tabs[i].onclick = function(){
            //对应的增加current的类,兄弟元素移除current的类;
            var siblings = this.previousElementSibling || this.nextElementSibling;
            siblings.className="";
            this.className="current";
            //对div遍历实现所有的div的隐藏,
            for(var m=0;m<contents.length;m++){
                contents[m].style.display="none";
            }
            //this的value值,找到点击li的下标并传给div;
            contents[this.value].style.display="block";
        }
    }
</script>

4.分析

1.代码结构写好;
2.在对li进行遍历的时候,要给每个li给一个记录index的标记;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券