Вы можете сделать это так, используя Javascript:
Под формой входа в систему вы добавляете блоки div вокруг элементов форм входа и регистрации, а для формы регистрации вы добавляете атрибут style="display:none" в скрыть это.
<!-- Login Form -->
<div id=loginElements>
<form>
<input type="text" id="login" class="fadeIn second" name="login" placeholder="login">
<input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
</div>
<div id=signupElements style="display:none">
<form>
<input type="text" id="signup" class="fadeIn second" name="signup" placeholder="signup">
<input type="text" id="signupPassword" class="fadeIn third" name="signupPassword" placeholder="password" style="display:none">
<input type="submit" class="fadeIn fourth" value="Sign Up">
</form>
</div>
, а затем вы добавляете onclick функции к заголовкам вкладок, которые изменяют то, что отображается. Пример, который скрывает форму входа и показывает форму регистрации:
<h2 class="inactive underlineHover" onclick=showSignUp()>Sign Up </h2>
и реализует ее следующим образом:
function showSignUp() {
// Hide login form
var loginElements = document.getElementById("loginElements");
loginElements.setAttribute('style', 'display:none');
// Display signup form
var signupElements = document.getElementById("signupElements");
signupElements.setAttribute('style', '');
}
Вы можете реализовать функцию, которая скрывает форму регистрации и показывает вход Форма похожа на эту. Также вам, вероятно, потребуется изменить классы заголовков вкладок, чтобы правильный из них отображался как активный. Это также очень похоже на приведенный выше код, вам просто нужно указать им идентификаторы, чтобы вы могли получить доступ к элементам с помощью Javascript, а затем использовать .setAttribute('class', 'active');, чтобы установить правильный класс.