2016-09-14 8 views
1

これを短く保つつもりです! ログイン/登録ページがあります。ユーザーがサイトに登録すると、ログインページが表示されます。ログインと登録が並んでいるページは1ページであり、クリックすると表示され、もう一方は非表示になっています。PHPヘッダー( 'Location:XYZ'); divに移動する

ページは次のとおりです。-index: http://prntscr.com/ci48ee - 読み込み時にどのように見えますか? http://prntscr.com/ci48jh

インデックスコード: ここでログインビットクリックするとページ-indexある

<?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'); 

しかし、私はそれを試みたときに動作しません。それ以上の情報が必要なら私に知らせてください!

+0

あなたのPHPコードを投稿しても助けてください! –

+1

'Header(" Location:[...] ")'は一般的に別のページに転送します。おそらくアンカータグを考えているのでしょうか? – Blake

+0

lighshots-linksが利用できません...ここのスクリーンショットを含める方が良い! – Jeff

答えて

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

に行く場合は、レジスタのタブが表示されます。

+2

すでに2つのタブにあります。 –

+0

@LewisHoggerson申し訳ありません、私はちょうど実現しました。私は自分の答えを更新しました。それはあなたが探していたものですか? –

1

あなたはほとんどルイスです。 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 = ...)を作りました。不要な使用から保護するだけです。

ブートストラップを使用している場合、通常は上記のように処理されます。 header()を注意する


ことの一つは、あなたがにリダイレクトする資格の場所を必要とするということです。したがって、header("Location: yourwebsite.com/#login");がより適切です。

関連する問題