Jquery Код не работает на мобильном телефоне, но работает на рабочем столе - PullRequest
Новая
       20

Jquery Код не работает на мобильном телефоне, но работает на рабочем столе

0 голосов
/ 29 марта 2020

У меня есть код для изменения вкладок в 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);

});

Код предназначен для переключения вкладок при нажатии, однако он работает на рабочем столе, но когда я пробую его на мобильном телефоне, это никогда не работает, пожалуйста, предложите, пожалуйста, что не так

...