jQuery代码不适用于移动设备,但适用于桌面

时间:2020-03-29 16:22:35

标签: jquery jquery-mobile

我有一个代码可以更改jquery中的标签,但是它可以在桌面上运行,而不能在移动设备上运行

这是下面的HTML代码

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

  <div class="tab-content">

     <div id="login">   
      <h1>Welcome Back!</h1>

      <form action="overlay.php" method="post" autocomplete="off">

        <div class="field-wrap">
        <label>
          Email Address<span class="req">*</span>
        </label>
        <input type="email" required autocomplete="off" name="email"/>
      </div>

      <div class="field-wrap">
        <label>
          Password<span class="req">*</span>
        </label>
        <input type="password" required autocomplete="off" name="password"/>
      </div>

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

      <button class="button button-block" name="login" />Log In</button>

      </form>

    </div>

    <div id="signup">   
      <h1>Sign Up for Free</h1>

      <form action="overlay.php" method="post" autocomplete="off">

      <div class="top-row">
        <div class="field-wrap">
          <label>
            First Name<span class="req">*</span>
          </label>
          <input type="text" required autocomplete="off" name='firstname' />
        </div>

        <div class="field-wrap">
          <label>
            Last Name<span class="req">*</span>
          </label>
          <input type="text"required autocomplete="off" name='lastname' />
        </div>
      </div>

      <div class="top-row">
        <div class="field-wrap">
          <label>
            Date of Birth<span class="req">*</span>
          </label>
          <input type="text" required autocomplete="off" name='dob' />
        </div>

        <div class="field-wrap">
          <label>
            Phone Number<span class="req">*</span>
          </label>
          <input type="text"required autocomplete="off" name='phone' />
        </div>
      </div>

      <div class="field-wrap">
        <label>
          Email Address<span class="req">*</span>
        </label>
        <input type="email"required autocomplete="off" name='email'/>
      </div>

      <div class="field-wrap">
        <label>
          Set A Password<span class="req">*</span>
        </label>
        <input type="password"required autocomplete="off" name='password'/>
      </div>

      <div class="field-wrap">
        <label>
          Confirm Password<span class="req">*</span>
        </label>
        <input type="password"required autocomplete="off" name='password2'/>
      </div>

      <div class="field-wrap">

        <input type="checkbox"  style = "height:20px; width:20px;" name="terms" value="terms"><span>Accept our Terms</span>
      </div>

      <button type="submit" class="button button-block" name="register" />Register</button>

      </form>
    </div>

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

这是下面的JQuery代码

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

});

该代码旨在在单击时切换选项卡,但是它可以在台式机上使用,但是当我在移动设备上尝试时,它永远无法使用,请提出错误的提示

0 个答案:

没有答案