HTML+CSS+JS实现在同一个页面内跳转两个不同内容

在项目实践中，我们可能会有如下功能需求：

当我们在登录页面时，需要点击注册功能。同时我们又不想重新加载一个新页面。

如果我们是用Vue来编写这个功能，那会相对容易一些。只需要用Vue-router即可轻松实现该功能。

那么在用Web原生框架的我们要想实现这个功能，就可以尝试用到以下的两种方法：

两种方法的完整代码我都将在文章结尾处给出完整代码

1.通过JavaScript代码来实现修改注入css代码到html代码中：

1.1 首先是需要利用flag来实现标记当前页面，然后就可以对你想要修改的内容来实现相对应的DOM操作：

let flag = 1;

    document.querySelector('.top-tips-span').addEventListener('click', function () {

        if (flag) {

            document.querySelector('.content').classList.add("add-class-content");

            document.querySelector('.login-img').classList.add("add-class-login-img");

            document.querySelector('.register-img').classList.add("add-class-register-img");

            document.querySelector('.login-img').classList.remove("add-class-login-img-show");

            document.querySelector('.login-wrapper').style.height = '80vh';

            document.querySelector('.content').style.height = '90vh';

            document.querySelector('.login-form').style.display = 'none';

            document.querySelector('.register-form').style.display = 'block';

            document.querySelector('.top-tips-span').innerHTML = '登录';

            document.querySelector('.h1-text').innerHTML = '注册';

            flag = 0;

        }

        else {

            document.querySelector('.content').classList.remove("add-class-content");

            document.querySelector('.login-img').classList.remove("add-class-login-img");

            document.querySelector('.login-img').classList.add("add-class-login-img-show");

            document.querySelector('.register-img').classList.remove("add-class-register-img");

            document.querySelector('.login-wrapper').style.height = '70vh';

            document.querySelector('.content').style.height = '85vh';

            document.querySelector('.login-form').style.display = 'block';

            document.querySelector('.register-form').style.display = 'none';

            document.querySelector('.top-tips-span').innerHTML = '注册';

            document.querySelector('.h1-text').innerHTML = '登录';

            flag = 1;

        }

    })

querySelector:文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

 document.querySelector('.top-tips-span')：你可以简单的理解为利用querySelector（）方法可以帮你查找top-tips-span的类名对象。这在我们的CSS和HTML代码中存在这个相对应的类名。

addEventListener('click', function () {}） ：方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

你可以理解为当前面你所要查找的类名查找到，并且单击此类名所对应的内容时，它会执行指定的回调函数。

classList.remove和classList.add：你可以理解为将你想要移除或者添加的标签，操作到相对应的文档列表位置。

2.通过JavaScript来实现修改display属性，去控制显示与隐藏

 2.1 第一步你需要先获取到要操作的元素

   

        // 要操作到的元素

        let login = document.getElementById('login');

        let register = document.getElementById('register');

        let form_box = document.getElementsByClassName('form-box')[0];

        let register_box = document.getElementsByClassName('register-box')[0];

        let login_box = document.getElementsByClassName('login-box')[0];

此处有一个小问题？[0]的意义在哪里呢？

这个问题在我写的时候遇到过麻烦，当你不加 [0] 时候，你操作不了对应的点击事件。

因为getElementsByClassName（）方法：返回的是一整个对象。而不是你想要操作的标签类。

当你加上 [0] 时候，他就会帮你获取到具体的你想要操作的标签名。

以下的控制台输出截图可以看出两者的区别。

 

加[0]情况

 

未加[0]情况

 2.2 第二步是完成相应的按钮点击事件即可。

        // 去注册按钮点击事件

        register.addEventListener('click', () => {

            form_box.style.transform = 'translateX(80%)';

            login_box.classList.add('hidden');

            register_box.classList.remove('hidden');

        })

        // 去登录按钮点击事件

        login.addEventListener('click', () => {

            form_box.style.transform = 'translateX(0%)';

            register_box.classList.add('hidden');

            login_box.classList.remove('hidden');

        })

 此处是通过提前写好的 hidden 类来实现的增加或者移除。

 同样也可以使用 display 来实现，代码会更简单些：

 Login.onclick = function () {

        LoginBox.style.display = 'block'

    }

    Register.onclick = function () {

        LoginBox.style.display = 'none'

        RegisterBox.style.display = 'block'

    }

直接修改对应类名的display属性，前提是当你需要显示注册内容时，你需要先隐藏掉登录内容。因为注册和登录的内容是在同一个区域内进行显示与隐藏。 

好啦，这就是我的全部理解了。如有不正确的地方欢迎大佬给予指正。如有不理解的内容也可以直接私信我。

以下是所有代码:

案例一代码：

<body>
    <div class="box">
        <div class="content">
            <img class="login-img images" src="./asset/login.jpg" alt="登录">
            <img class="register-img images" src="./asset/register.jpg" alt="注册">
            <div class="login-wrapper">
                <div class="top-tips">
                    <span>CAT IS LITTLE #FFF</span>
                    <span class="top-tips-span">注册</span>
                </div>
                <h1 class="h1-text">登录</h1>
                <div class="other-login">
                    <img src="./asset/QQ.png" alt="">
                    <span>使用QQ登录</span>
                </div>
                <div class="login-form">
                    <div class="user-form form-item">
                        <div class="text-tips">
                            <span>账号</span>
                        </div>
                        <input type="text">
                    </div>
                    <div class="password-form form-item">
                        <div class="text-tips">
                            <span>密码</span>
                            <span class="forgot-password">忘记密码?</span>
                        </div>
                        <input type="password">
                    </div>
                    <button class="btn">登录</button>
                </div>
                <div class="register-form">
                    <div class="user-form form-item">
                        <div class="text-tips">
                            <span>账号</span>
                        </div>
                        <input type="text">
                    </div>
                    <div class="password-form form-item">
                        <div class="text-tips">
                            <span>密码</span>
                        </div>
                        <input type="password">
                    </div>
                    <div class="password-form form-item">
                        <div class="text-tips">
                            <span>确认密码</span>
                        </div>
                        <input type="password">
                    </div>
                    <button class="btn">注册</button>
                </div>
            </div>
        </div>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
  }
  
  .box {
    background-color: rgb(51, 32, 108);
    width: 100vw;
    height: 100vh;
  }
  .box .content {
    width: 90vw;
    height: 85vh;
    background-color: rgb(228, 218, 232);
    border-radius: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 1s;
  }
  .box .content .images {
    margin-left: -150px;
    margin-right: 100px;
    position: absolute;
    left: 15%;
  }
  .box .content .login-img {
    width: 45%;
    height: 90%;
    border-radius: 15%;
  }
  .box .content .register-img {
    width: 45%;
    opacity: 0;
    border-radius: 15%;
  }
  .box .content .login-wrapper {
    width: 30vw;
    height: 70vh;
    border-radius: 40px;
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
    background: rgba(244, 240, 245, 0.6);
    padding: 60px;
    box-sizing: border-box;
    position: absolute;
    right: 10%;
    transition: 1s;
  }
  .box .content .login-wrapper .top-tips span:nth-child(1) {
    font-size: 25px;
    font-weight: 600;
  }
  .box .content .login-wrapper .top-tips .top-tips-span {
    font-size: 15px;
    color: rgb(79, 133, 226);
    border-bottom: 1px solid rgb(79, 133, 226);
    float: right;
    line-height: 25px;
    cursor: pointer;
  }
  .box .content .login-wrapper h1 {
    font-size: 45px;
    margin: 20px 0;
  }
  .box .content .login-wrapper .other-login {
    width: 60%;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    margin: 40px 0;
    background-color: rgb(79, 133, 226);
    padding-bottom: 2px;
    cursor: pointer;
  }
  .box .content .login-wrapper .other-login img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
  .box .content .login-wrapper .other-login span {
    vertical-align: middle;
  }
  .box .content .login-wrapper .login-form,
  .box .content .login-wrapper .register-form {
    width: 100%;
  }
  .box .content .login-wrapper .login-form .form-item .text-tips,
  .box .content .login-wrapper .register-form .form-item .text-tips {
    color: rgb(123, 122, 123);
    margin: 5px;
  }
  .box .content .login-wrapper .login-form .form-item .text-tips .forgot-password,
  .box .content .login-wrapper .register-form .form-item .text-tips .forgot-password {
    font-size: 15px;
    color: rgb(79, 133, 226);
    border-bottom: 1px solid rgb(79, 133, 226);
    float: right;
    line-height: 25px;
    cursor: pointer;
  }
  .box .content .login-wrapper .login-form .form-item input,
  .box .content .login-wrapper .register-form .form-item input {
    width: 100%;
    height: 50px;
    margin: 5px 0;
    border-radius: 5px;
    border: 0;
    font-size: 17px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .box .content .login-wrapper .login-form .form-item input:focus,
  .box .content .login-wrapper .register-form .form-item input:focus {
    outline: none;
    border: 1px solid rgb(79, 133, 226);
  }
  .box .content .login-wrapper .login-form .btn,
  .box .content .login-wrapper .register-form .btn {
    width: 150px;
    height: 50px;
    margin: 20px 0;
    background-color: rgb(59, 58, 59);
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .box .content .login-wrapper .login-form {
    display: block;
  }
  .box .content .login-wrapper .register-form {
    display: none;
  }
  
  .add-class-content {
    background-color: rgb(156, 148, 208) !important;
    transition: 0.1s;
  }
  
  .add-class-login-img {
    -webkit-animation: disappear 0.3s forwards;
            animation: disappear 0.3s forwards;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  
  .add-class-login-img-show {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation: appear 1s forwards;
            animation: appear 1s forwards;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
  }
  
  .add-class-register-img {
    -webkit-animation: appear 1s forwards;
            animation: appear 1s forwards;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  
  @-webkit-keyframes appear {
    from {
      border-radius: 15%;
      opacity: 0;
    }
    to {
      border-radius: 0%;
      opacity: 1;
    }
  }
  
  @keyframes appear {
    from {
      border-radius: 15%;
      opacity: 0;
    }
    to {
      border-radius: 0%;
      opacity: 1;
    }
  }
  @-webkit-keyframes disappear {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes disappear {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }/*# sourceMappingURL=style.css.map */

<script>
    let flag = 1;
    document.querySelector('.top-tips-span').addEventListener('click', function () {
        if (flag) {
            document.querySelector('.content').classList.add("add-class-content");
            document.querySelector('.login-img').classList.add("add-class-login-img");
            document.querySelector('.register-img').classList.add("add-class-register-img");
            document.querySelector('.login-img').classList.remove("add-class-login-img-show");
            document.querySelector('.login-wrapper').style.height = '80vh';
            document.querySelector('.content').style.height = '90vh';
            document.querySelector('.login-form').style.display = 'none';
            document.querySelector('.register-form').style.display = 'block';
            document.querySelector('.top-tips-span').innerHTML = '登录';
            document.querySelector('.h1-text').innerHTML = '注册';
            flag = 0;
        }
        else {
            document.querySelector('.content').classList.remove("add-class-content");
            document.querySelector('.login-img').classList.remove("add-class-login-img");
            document.querySelector('.login-img').classList.add("add-class-login-img-show");
            document.querySelector('.register-img').classList.remove("add-class-register-img");
            document.querySelector('.login-wrapper').style.height = '70vh';
            document.querySelector('.content').style.height = '85vh';
            document.querySelector('.login-form').style.display = 'block';
            document.querySelector('.register-form').style.display = 'none';
            document.querySelector('.top-tips-span').innerHTML = '注册';
            document.querySelector('.h1-text').innerHTML = '登录';
            flag = 1;
        }
    })
</script>

 

 案例二代码：

<body>
    <div class="container">
        <div class="form-box">
            <!-- 注册 -->
            <div class="register-box hidden">
                <h1>register</h1>
                <input type="text" placeholder="用户名">
                <input type="email" placeholder="邮箱">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
                <button>注册</button>
            </div>
            <!-- 登录 -->
            <div class="login-box">
                <h1>login</h1>
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <button>登录</button>
            </div>
        </div>
        <div class="con-box left">
            <h2>欢迎来到<span>我的世界</span></h2>
            <img src="../images/cat/1.png" alt="">
            <p>已有账号</p>
            <button id="login">去登录</button>
        </div>
        <div class="con-box right">
            <h2>欢迎来到<span>我的世界</span></h2>
            <img src="../images/cat/2.png" alt="">
            <p>没有账号？</p>
            <button id="register">去注册</button>
        </div>
    </div>
</body>

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.container{
    background-color: #fff;
    width: 650px;
    height: 415px;
    border-radius: 5px;
    /* 阴影 */
    box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
    /* 相对定位 */
    position: relative;
}
.form-box{
    /* 绝对定位 */
    position: absolute;
    top: -10%;
    left: 5%;
    background-color: #d3b7d8;
    width: 320px;
    height: 500px;
    border-radius: 5px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* 动画过渡 加速后减速 */
    transition: 0.5s ease-in-out;
}
.register-box,.login-box{
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.hidden{
    display: none;
    transition: 0.5s;
}
h1{
    text-align: center;
    margin-bottom: 25px;
    /* 大写 */
    text-transform: uppercase;
    color: #fff;
    /* 字间距 */
    letter-spacing: 5px;
}
input{
    background-color: transparent;
    width: 70%;
    color: #fff;
    border: none;
    /* 下边框样式 */
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding: 10px 0;
    text-indent: 10px;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 2px;
}
input::placeholder{
    color: #fff;
}
input:focus{
    color: #a262ad;
    outline: none;
    border-bottom: 1px solid #a262ad80;
    transition: 0.5s;
}
input:focus::placeholder{
    opacity: 0;
}
.form-box button{
    width: 70%;
    margin-top: 35px;
    background-color: #f6f6f6;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: #a262ad;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
}
.form-box button:hover{
    background-color: #a262ad;
    color: #f6f6f6;
    transition: background-color 0.5s ease;
}
.con-box{
    width: 50%;
    /* 弹性布局 垂直排列 居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 绝对定位 居中 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.con-box.left{
    left: -2%;
}
.con-box.right{
    right: -2%;
}
.con-box h2{
    color: #8e9aaf;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 4px;
}
.con-box p{
    font-size: 12px;
    letter-spacing: 2px;
    color: #8e9aaf;
    text-align: center;
}
.con-box span{
    color: #d3b7d8;
}
.con-box img{
    width: 150px;
    height: 150px;
    opacity: 0.9;
    margin: 40px 0;
}
.con-box button{
    margin-top: 3%;
    background-color: #fff;
    color: #a262ad;
    border: 1px solid #d3b7d8;
    padding: 6px 10px;
    border-radius: 5px;
    letter-spacing: 1px;
    outline: none;
    cursor: pointer;
}
.con-box button:hover{
    background-color: #d3b7d8;
    color: #fff;
}

<script>
        // 要操作到的元素
        let login = document.getElementById('login');
        let register = document.getElementById('register');
        let form_box = document.getElementsByClassName('form-box')[0];
        let register_box = document.getElementsByClassName('register-box')[0];
        let login_box = document.getElementsByClassName('login-box');
        console.log(login_box);
        // 去注册按钮点击事件
        register.addEventListener('click', () => {
            form_box.style.transform = 'translateX(80%)';
            login_box.classList.add('hidden');
            register_box.classList.remove('hidden');
        })
        // 去登录按钮点击事件
        login.addEventListener('click', () => {
            form_box.style.transform = 'translateX(0%)';
            register_box.classList.add('hidden');
            login_box.classList.remove('hidden');
        })
    </script>