html - Shifting from login to register in html login page

Question

I have a trouble toggling between the login page and register page. So I want a piece of code which will help me shift from - Register Page

to this - Login Page

plz someone help me with the js part here. (only the front-end not the back-end

Answer 1

请检查以下代码以在登录和注册页面之间切换。

$("a").click(function(e){
        e.preventDefault();
        var x = $(this).attr("href");
        $(".form_container").removeClass("active");
        $(x).addClass('active');
    });

*{
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        .form_container{
            display: none;
        }
        .active{
            display: block;
        }
        a{
            margin: 5px 0px 0px;
            color: #000;
            display: inline-block;
            padding: 7px 10px;
            background: #ccc;
            outline: 0;
            text-decoration: none;
            border-radius: 3px; 
        }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
    <div class="form_container active" id="login">
        <h5>Login Content goes here.....</h5>
        <a href="#register">Register</a>
    </div>
    <div class="form_container" id="register">
        <h5>Register Content goes here.....</h5>
        <a href="#login">Login</a>
    </div>
</div>

Answer 2

你可以用jquery做这样的事情......

html

<div id="loginForm">
   LOGIN FORM
</div>

<div id="registerForm" style="display:none;">
   REGISTER FORM
</div>

<a href="#" id="toggleLogin" class="toggleRegister" >Register instead</a>
<a href="#" id="toggleRegister" class="toggleRegister" style="display:none"; >Login Instead</a>

javascript

$('document').ready( () => {

    $('.toggleRegister').on('click', (e) => { 
        e.preventDefault;
        $('#toggleRegister').toggle();
        $('#toggleLogin').toggle();
        $('#registerForm').toggle();
        $('#loginForm').toggle();
    })

});