Question

要保持这个简短！所以我有一个登录/注册页面，当用户注册到网站时，我希望他们显示登录页面。请注意它是并排登录和注册的一个页面，当点击一个页面时，显示另一个页面，而另一个页面被隐藏。

这是页面索引： http://prntscr.com/ci48ee - 加载时的样子。点击登录位后，这是页面 - 索引： http://prntscr.com/ci48jh

索引代码：

<?php
include 'dbh.php';
if(isset($_POST['rsubmit'])){
$username = $_POST['username'];
$email = $_POST['email'];
$plainpass = $_POST['password'];
$password = password_hash($plainpass, PASSWORD_BCRYPT, array('cost' => 10));
$sql = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')";
$result = mysqli_query($conn, $sql);
header('Location: #login');
}else {}
?>
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Mr. Liam</title>
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="form"> 
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>     
      <div class="tab-content">
        <div id="signup">   
          <h1>Sign Up to view content</h1>          
          <form action="index.php" method="post">          
          <div class="field-wrap">
            <label>
              Username<span class="req">*</span>
            </label>
            <input name="username" type="text"required/>
          </div> 
          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input name="email" type="email"required autocomplete="off"/>
          </div>          
          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input name="password" type="password"required autocomplete="off"/>
          </div>         
          <button name="rsubmit" type="submit" class="button button-block"/>Register</button>         
          </form>
        </div>        
        <div id="login">   
          <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 -->
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src="js/index.js"></script>  
  </body>
</html>

我猜这是什么？

Header('Location: #login');

但是当我尝试它并不起作用时。如果您需要更多信息，请告诉我们！

Answer 1

您必须通过将活动类设置为适当的选项卡来更改哪个选项卡处于活动状态。

目前它位于注册选项卡上，因此默认情况下将加载该选项卡。我在下面改了。

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

如果你想动态地这样做，你可以做..

<?php
$currentPage = $_GET['page'];
?>

      <ul class="tab-group">
        <li class="tab <?php if ($currentPage == "signup" ){echo "active" } ?>"><a href="#signup">Sign Up</a></li>
        <li class="tab <?php if ($currentPage == "login" ){echo "active" } ?>"><a href="#login">Log In</a></li>
      </ul>

所以如果用户去

www.website.com/user?page=login

是否会显示登录标签。或者如果他们去

www.website.com/user?page=signup

它将显示寄存器选项卡。

Answer 2

你几乎就在路易斯。 header("Location: [...]");并使用#login之类的锚点唯一需要注意的是，它会尝试查找<.... id="login">并滚动到该值。如果没有jQuery中的轻微修改，它就不会做你想要的。

var allowed = ['#signup', '#login'];
if (!empty(window.location.hash)) {
    var action = window.location.hash;
    // check if in our array
    if(jQuery.inArray(action, allowed)) {
        jQuery('a[href=' + action + ']').trigger('click');
    }
}

^{我刚刚在上面做了一个白名单（var allowed = ...）。只是为了防止任何不必要的使用。}

如果你正在使用Bootstrap，它通常会照顾上面的内容。

关于header()需要注意的一点是，您需要一个合格的位置才能重定向到。所以header("Location: yourwebsite.com/#login");会更充足。

PHP标题（＆＃39;位置：XYZ＆＃39;）;找到一个div

2 个答案: