如何从当前 HTML 调用另一个 HTML 页面并隐藏一些元素？答案

【问题标题】：How to call another HTML page from current HTML with some elements hidden?如何从当前 HTML 调用另一个 HTML 页面并隐藏一些元素？
【发布时间】：2017-06-05 12:57:46
【问题描述】：

我目前正在开发一个网站。在这种情况下我有两个页面，第一个是主页，第二个是注册页面。在第一页我有两个按钮叫做登录和注册。在注册 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访问请求页面（注册页面）并隐藏合适的分区并打开页面。但我不知道该怎么做。我在互联网上也找不到任何有关的信息。如果您有其他比这更容易的方法，请随时说。谢谢。

【问题讨论】：

使用查询字符串就可以轻松搞定
您是否有不想拥有单独的登录和注册页面的原因？
你能解释一下吗？
在window.onload 中使用location 确定打开的页面并使用document.getElementById() 找到合适的元素，然后使用element.style.display = 'none' 隐藏它

标签： javascript html css

【解决方案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>

注意：它们的演示只是展示了基本的操作机制。

如果你想变得花哨，你可以使用 javascript 来检查 # 是否存在并设置一个默认值。请参阅How do I get the value after hash (#) from a URL using jquery 以帮助您入门。

【讨论】：

【解决方案2】：

我希望你可以试试这个。

    <script type="text/javascript">

    $(document).ready(function(){
            $("#loginBox").click(function(){

                 window.location.href = 'url';
            });
            $("#signupBox").click(function(){

              window.location.href = 'url';
            });
        });
    </script>

【讨论】：

谢谢。我应该在哪里提到我需要在那里打开signup.html？我的意思是在您的代码中没有指示应该打开和修改哪个 html 文件？

【解决方案3】：

您的主页

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form method="POST">
<table>
    <tr>
        <td><input type="button" id="LogBtn" value="Login"></td>
        <td><input type="button" id="LogoutBtn" value="Signup"></td>
    </tr>
</table>
</form>
<script type="text/javascript">
jQuery("#LogBtn").click(function(){
window.location="signup.html?id=1";
})
jQuery("#LogoutBtn").click(function(){
window.location="signup.html?id=2";
})
</script>
</body>
</html>

注册页面

<!DOCTYPE html>
<html>
<head>
    <title>Signup Page</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">


*, *:before, *:after {
  box-sizing: border-box;
}

html {
    overflow-y: scroll; 
}

body {
  background:$body-bg;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration:none;
  color:$main;
  transition:.5s ease;
  &:hover {
    color:$main-dark;
  }
}

.form {
  background:rgba($form-bg,.9);
  padding: 40px;
  max-width:600px;
  margin:40px auto;
  border-radius:$br;
  box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}

.tab-group {
  list-style:none;
  padding:0;
  margin:0 0 40px 0;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  li a {
    display:block;
    text-decoration:none;
    padding:15px;
    background:rgba($gray-light,.25);
    color:$gray-light;
    font-size:20px;
    float:left;
    width:50%;
    text-align:center;
    cursor:pointer;
    transition:.5s ease;
    &:hover {
      background:$main-dark;
      color:$white;
    }
  }
  .active a {
    background:$main;
    color:$white;
  }
}

.tab-content > div:last-child {
  display:none;
}


h1 {
  text-align:center;
  color:$white;
  font-weight:$thin;
  margin:0 0 40px;
}

label {
  position:absolute;
  transform:translateY(6px);
  left:13px;
  color:rgba($white,.5);
  transition:all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size:22px;
  .req {
    margin:2px;
    color:$main;
  }
}

label.active {
  transform:translateY(50px);
  left:2px;
  font-size:14px;
  .req {
    opacity:0;
  }
}

label.highlight {
    color:$white;
}

input, textarea {
  font-size:22px;
  display:block;
  width:100%;
  height:100%;
  padding:5px 10px;
  background:none;
  background-image:none;
  border:1px solid $gray-light;
  color:$white;
  border-radius:0;
  transition:border-color .25s ease, box-shadow .25s ease;
  &:focus {
        outline:0;
        border-color:$main;
  }
}

textarea {
  border:2px solid $gray-light;
  resize: vertical;
}

.field-wrap {
  position:relative;
  margin-bottom:40px;
}

.top-row {
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  > div {
    float:left;
    width:48%;
    margin-right:4%;
    &:last-child { 
      margin:0;
    }
  }
}

.button {
  border:0;
  outline:none;
  border-radius:0;
  padding:15px 0;
  font-size:2rem;
  font-weight:$bold;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:$main;
  color:$white;
  transition:all.5s ease;
  -webkit-appearance: none;
  &:hover, &:focus {
    background:$main-dark;
  }
}

.button-block {
  display:block;
  width:100%;
}

.forgot {
  margin-top:-20px;
  text-align:right;
}
    </style>
</head>
<body>
<form method="POST">
<div class="container">    
   <div class="form">

      <ul class="tab-group">
        <li class="tab active"><a href="#signupBox">Sign Up</a></li>
        <li class="tab"><a href="#loginBox">Log In</a></li>
      </ul>

      <div class="tab-content">
        <div id="signupBox">   
          <h1>Sign Up for Free</h1>

          <form action="/" method="post">

          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>

            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>

          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>

          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>

          <button type="submit" class="button button-block"/>Get Started</button>

          </form>

        </div>

        <div id="loginBox">   
          <h1>Welcome Back!</h1>

          <form action="/" method="post">

            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email" required autocomplete="off"/>
          </div>

          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password" required autocomplete="off"/>
          </div>

          <p class="forgot"><a href="#">Forgot Password?</a></p>

          <button class="button button-block"/>Log In</button>

          </form>

        </div>

      </div><!-- tab-content -->

</div> <!-- /form -->
</div>

</form>
<script type="text/javascript">
var id=GetQueryStringParams('id');
if(id == 1){
$("#loginBox").show();
$("#signupBox").hide();
}else{
$("#loginBox").hide();
$("#signupBox").show();
}
function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}
$('.form').find('input, textarea').on('keyup blur focus', function (e) {

  var $this = $(this),
      label = $this.prev('label');

      if (e.type === 'keyup') {
            if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
        if( $this.val() === '' ) {
            label.removeClass('active highlight'); 
            } else {
            label.removeClass('highlight');   
            }   
    } else if (e.type === 'focus') {

      if( $this.val() === '' ) {
            label.removeClass('highlight'); 
            } 
      else if( $this.val() !== '' ) {
            label.addClass('highlight');
            }
    }

});

$('.tab a').on('click', function (e) {

  e.preventDefault();

  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');

  target = $(this).attr('href');

  $('.tab-content > div').not(target).hide();

  $(target).fadeIn(600);

});
</script>
</body>
</html>

【讨论】：

谢谢。但是什么也没发生。
你创建单独的文件吗？
我将您的第一个代码部分粘贴在主页的脚本下，第二部分粘贴在 login.html 页面脚本上。