Jquery 如何使用两个按钮从中间页面的左侧和右侧创建页面转换？

我在JQM中有两个页面，login和register，默认为login页面，如果单击register transition，则在标题I处注册，反之亦然，如果在register中单击back，则在login处结束

    <div data-role="page" id="login-page">
        <div data-role="header">
            <a href="#register-page">Register</a>
            <h1>Login</h1>
        </div>

        <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
            <form>

            </form>
            <input type="button" id="login" value="Login" class="large_input" style="min-height: 60px;">
        </div>

        <div data-position="fixed" data-role="footer">
            <h4 id="login_message"></h4>
        </div>
    </div>

    <div data-role="page" data-add-back-btn="true" id="register-page" class="ui-content-transparent">
        <div data-role="header">
            <h1>CVE Registration</h1>
        </div>

        <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
            <form>


            </form>
            <input type="button" id="register" value="Register" class="large_input" style="min-height: 60px;">
        </div>

        <div data-role="footer" data-position="fixed">
            <h4 id="register_message"></h4>
        </div>
    </div>

登录
CVE注册

我需要设置默认值（添加两个大按钮登录和注册的新页面）新页面，当用户点击登录按钮从左侧过渡到登录页面时，以及当用户点击注册从右侧过渡到注册页面时

Login Page ====> Default with two buttons <==== Register Page

---

登录页面===>默认设置有两个按钮您需要一些js来完成此操作，如果您想使其平滑滚动
请尝试如下所示向左转到登录页面

<a href="#Loginpage" data-direction="reverse">Login</a>



data direction=“reverse”用于返回
这两个按钮（标题内）可以，请检查演示


登录
CVE注册
这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论-您可以随时对自己的帖子发表评论，一旦有足够的评论，您就可以发表评论。如果您有新问题，请单击按钮提问。如果此问题有助于提供上下文，请包含指向此问题的链接。
<div data-role="page" id="login-page">
    <div data-role="header">
        <a href="#register-page" data-role="button" data-theme="b" data-transition="slide">Register</a>
        <h1>Login</h1>
    </div>
    <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
        <form>
        </form>
        <input type="button" id="login" value="Login" class="large_input" style="min-height: 60px;">
    </div>
    <div data-position="fixed" data-role="footer">
        <h4 id="login_message"></h4>
    </div>
</div>

<div data-role="page" id="register-page" class="ui-content-transparent">
    <div data-role="header">
        <a href="#login-page" data-role="button" data-theme="b" data-transition="slide" data-direction="reverse">Login</a>
        <h1>CVE Registration</h1>
    </div>
    <div data-role="content" class="ui-content-transparent" style="width: 40%; margin-left: auto; margin-right: auto;">
        <form>
        </form>
        <input type="button" id="register" value="Register" class="large_input" style="min-height: 60px;">
    </div>
</div>