javascript - 如何从当前 HTML 中调用另一个隐藏了某些元素的 HTML 页面？

Question

我目前正在开发一个网站。在这种情况下我有两个页面，第一个是主页，第二个是注册页面。在第一页中，我有两个按钮，分别称为“登录”和“注册”。在注册 HTML 页面中，我使用分区制作了登录表单和注册表单。简单地说，一个部门包含登录表单，其他部门包含注册表单，根据我的需要，我只是使用 onclick 方法隐藏了我不想要的内容。

我想要什么

现在我需要，当我点击主页中的登录按钮时，它应该转到注册页面，但是注册部分应该被隐藏，而登录部分应该是可见的。如果我点击主页上的注册按钮，它应该会转到注册页面，但是包括部门的登录表单应该被隐藏，而登录部门应该是可见的。

<div class="container">    
    <div id="loginBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code// 
    </div>   
    <div id="signupBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code//
    </div>
</div>

我的方法

我想使用 javascript 访问请求页面(注册页面)并隐藏合适的分区并打开页面。但我不知道该怎么做。我也找不到任何有关互联网的信息。如果您有另一种比这更容易的方法，请随时说。谢谢。

Answer 1

仅 CSS/HTML 方法

第一步:

在您的主页上将按钮更改为链接，但您可以随意将它们设置为按钮样式。在链接上设置目标

例如:

<a href="signup.html#signupBox">Sign Up</a> <a href="signup.html#loginBox">Log In</a>

第 2 步:

然后在您的 signup.html 页面中有如下内容:

<div class="container signup">    
    <div id="loginBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code// 
    </div>   
    <div id="signupBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        //Code//
    </div>
</div>

并添加以下CSS

.signup > div {display:none;}
.signup > div:target {display:block;}

当使用目标访问注册页面时，例如 http://yoursite/signup.html#loginBox , 将显示相应的部分。

这有一个额外的好处，即注册和登录可以分别添加书签。

一个简单的单页演示:

.nav a {border: 1px solid black; padding: 15px; text-decoration: none; margin-right:15px; margin-top: 15px; font-weight:bold;}

.signup h2 {padding: 10px; background-color:blue;}
.signup a:link, .signup a:visited {color:white; text-decoration: none;}

.signup > div {display:none;}
.signup > div:target {display:block;}

<div class="nav">

    <a href="#signupBox">Sign Up</a> <a href="#loginBox">Log In</a>
</div>



    <div class="container signup">    
        <h2><a href="#loginBox">Log In</a></h2>
        <div id="loginBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            Your Log In Form Here
        </div>   
        <h2><a href="#signupBox">Sign Up</a></h2>
        <div id="signupBox" style="margin-top:50px;padding-top:80px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            Your Signup Form Here
        </div>
    </div>

注意:他们的 Demo 只是展示了基本的操作机制。

如果你想要花哨的，你可以使用javascript来检查#是否存在并设置一个默认值。参见 How do I get the value after hash (#) from a URL using jquery让你开始。