Question

我的网页在页面顶部有3个链接：登录，注册和忘记密码。单击一个将为您提供您请求的特定表单。

但是，首次加载或刷新页面时，它会在同一页面上显示注册和登录表单。

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

});

编辑：根据要求，HTML如下：

     <!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>

Answer 1

你可以把style =＆＃34; display：none＆＃34;内联您不希望在页面加载时显示的div。

第一次加载页面

1 个答案: