Mi página web tiene 3 enlaces en la parte superior de la página: Iniciar sesión , Registrarse y Contraseña olvidada . Al hacer clic en uno, obtendrá el formulario específico que solicitó.

Sin embargo, cuando la página se carga o actualiza por primera vez, mostrará los formularios de registro y de inicio de sesión en la misma página.

$('.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);

});

EDITAR: Según lo solicitado, el HTML es el siguiente:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Control Panel</title>
    <link href="/elitlcsys/styles/cp.css" rel="stylesheet" type="text/css" />
    <link href="/elitlcsys/js/cp.js" rel="alternate" type="text/javascript" />
    </head>

   <body>
  <div class="form">
  <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>
    <li class="tab"><a href="#forgetpass">Forgot Password</a></li>
  </ul>

  <div class="tab-content">
    <div id="signup">   
      <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="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 id="forgetpass">   
      <h1>Want your password 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>

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

      <button class="button button-block"/>Send Password</button>

      </form>

    </div>

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

  </div> <!-- /form -->
   </body>
  </html>     
1
Mubarak Abdirahman 3 ene. 2017 a las 05:43
¿Puede mostrar lo que ha escrito para su HTML?
 – 
Eliezer Wohl
3 ene. 2017 a las 06:00
Recién publicado, ¡gracias por intentar responder a mi pregunta!
 – 
Mubarak Abdirahman
3 ene. 2017 a las 10:45

1 respuesta

La mejor respuesta

Puede poner style = "display: none" en línea en los divs que no desea mostrar al cargar la página.

0
user7375687 3 ene. 2017 a las 07:03