切换

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 条评论
登录 后参与评论

相关文章

  • 选择器与css的一些用法

    天天_哥
  • css3转换(banner)

    天天_哥
  • 使用swiper制作拓展效果(跑马灯)

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

    天天_哥
  • VS做简历的第三天(将文件中的样式保存并且导入)

    谢谢 关于display: ,我还是未能理解希望大佬路过指点一下举个例子,我查过百度看过很多也尝试过display后面所有自动生产的命令,我还是没法理解.

    小小咸鱼YwY
  • 选择器与css的一些用法

    天天_哥
  • VS搭建一个WEB的简历第二天,,,最终目标写个好看的简历,再搭建一个自己脑海的网页

    第一天写的代码https://www.cnblogs.com/pythonywy/p/10816215.html,写了一堆错误T T

    小小咸鱼YwY
  • 怎么处理多层Json数据循环遍历的问题?看这里

    今天我们写一个关于处理多层for循环的问题,其实这个严格来说不是多层循环的问题,他的本质其实是对Json数据格式的处理,很多时候啊我们的数据格式是这样的

    何处锦绣不灰堆
  • 3种纯CSS方式实现Tab 切换

    Tab 切换是种很常见的网页呈现形式,不管是PC或者H5都会经常看到,今天就为小伙伴们提供多种纯CSS Tab 切换的实现方式,同时对比一下那种代码更方便,更通...

    Javanx
  • CSS3实现饼图扇形loading效果

    2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

    javascript.shop
  • 浮动元素margin-bottom失效 — IE6盒模型

    HTML5学堂:虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'z...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券