JS的登录注册的页面的相互跳转

HTML框架： 

首先用Html写一个表单：用ul标签写表单头，给一个div块取类名为cent,用来存储验证码和密码登录的界面，两模块分别再用小的div块包裹，并且取一个类名为s.

html的相关代码：

<form action="">
        <ul>
            <li>验证码登录</li>
            <li>密码登录</li>
        </ul>
        <div class="cent">
            <div class="s" style="display: block;">
                <input type="text" placeholder="请输入你的手机号"><br>
                <input type="text" placeholder="请输入六位短信验证码">
                <a href="#">获取短信验证码</a><br>
                <input id="but" type="submit" value="登录/注册">
            </div>
            <div class="s">
                <input type="text" placeholder="手机号或邮箱"><br>
                <input type="text" placeholder="请输入密码">
                <input id="but" type="submit" value="登录/注册">
            </div>
        </div>
</form>

 CSS相关样式的部分

<style>
        * {
            /* 将整个页面进行格式化 */
            margin: 0;
            padding: 0;
        }
        /* 设置ul中包裹的li的样式 并且将它两浮动到一行*/
        ul li {
            list-style: none;
            width: 100px;
            height: 40px;
            font-size: 300;
            float: left;
            text-align: center;
            line-height: 40px;
        }
        /* 父级清除浮动 */
        ul {
            overflow: hidden;
        }
        /* 设置input框的相关样式 */
        input {
            width: 400px;
            height: 40px;
            margin-top: 15px;
            outline: none;
            border-top: none;
            border-left: none;
            border-right: none;
            font-weight: 1000;
        }
        /* 设置盛装登录注册页面的样式 */
        .cent {
            width: 500px;
            margin-top: 5px;
            position: relative;
        }
        /* 设置提交的按钮 */
        #but {
            border-bottom: none;
            background-color: blue;
            color: white;
            font-weight: 600;
            margin-bottom: 10px;
            border-radius: 10px;
        }
        /* 设置点击跳转接收验证码的样式 运用子绝父相的原理 */
        a {
            position: absolute;
            right: 100px;
            top: 80px;
        }
        /* 刚开始的时候登录和注册页面都先进行隐藏 */
        .s{
            display: none;
        }
        /* 再点击完之后，给li一个新的样式 排他思想 */
        .li{
            border-bottom: 3px solid blue;
        }
    </style>

JS代码部分

JS相关代码解释： 首先获取到相关元素，再点击登录按钮的时候，只能有登录界面，这就需要用到排他思想的知识点（如下），会再li标签中加入索引属性作为联系两者关系的纽带存在，实现点击登录出现登录界面，点击注册出现注册界面。

排他思想的作用：如果有一组元素，想要某一个元素实现某种样式，就需要用到循环的排他思想

                             （1）所有元素全部清除样式（自己想独有的样式）

                             （2）给当前元素设置样式（留下自己）

<script>
        //首先获取到所有li作为一个集合再后续使用
        var list=document.querySelectorAll('li');
        //获取到刚开始登录注册页面的两个div块也作为集合存放
        var div=document.querySelectorAll('.s');
        for(var i=0;i<list.length;i++){
            //给li标签设置一个自定义的属性和属性值；
            list[i].setAttribute('index',i);
            //排他思想
            list[i].onclick=function(){
                for(var i=0;i<list.length;i++){
                    //让所有的样式都消失
                    list[i].className='';
                }
                //只留下自己的样式 li是一个新的类的样式，直接调用
                this.className='li';
                //得到刚才设置的自定义的属性的值
                var index=this.getAttribute('index');
                //排他思想
                for(var j=0;j<div.length;j++){
                    div[j].style.display='none';
                }
                //用刚才得到的自定义的属性的值，实现对应界面的跳转    
                div[index].style.display='block';
            }
            
        }
    </script>

运行效果展示：

点击验证码登录，出现验证码登录的界面

点击密码登录出现密码登录的界面