模态选项卡在第一次触发时无法正确加载

时间：2018-07-07 02:22:07

标签： javascript jquery html

我希望这可以正常工作。可运行的代码：

<!DOCTYPE HTML>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Text editor</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- Button trigger modal -->
  <button class="btn btn-primary btn-lg" href="#signin" data-toggle="modal" data-target="#myModal">Sign In/Register</button>

  <!-- Modal -->
  <div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <br>
        <ul id="myTab" class="nav nav-tabs">
          <li class="nav-item"><a class="nav-link active" href="#signin" data-toggle="tab">Sign In</a></li>
          <li class="nav-item"><a class="nav-link" href="#signup" data-toggle="tab">Register</a></li>
          <li class="nav-item"><a class="nav-link" href="#why" data-toggle="tab">Why?</a></li>
        </ul>
        <div class="modal-body">
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in" id="why">
              <p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
              <p>
                <br> Please contact <a mailto:href="JoeSixPack@Sixpacksrus.com">JoeSixPack@Sixpacksrus.com for any other inquiries.</a></p>
            </div>
            <div class="tab-pane fade in active" id="signin">
              <form class="form-horizontal">
                <fieldset>
                  <!-- Sign In Form -->
                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="userid">Alias:</label>
                    <div class="controls">
                      <input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
                    </div>
                  </div>

                  <!-- Password input-->
                  <div class="control-group">
                    <label class="control-label" for="passwordinput">Password:</label>
                    <div class="controls">
                      <input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
                    </div>
                  </div>

                  <!-- Multiple Checkboxes (inline) -->
                  <div class="control-group">
                    <label class="control-label" for="rememberme"></label>
                    <div class="controls">
                      <label class="checkbox inline" for="rememberme-0">
                    <input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
                    Remember me
                    </label>
                    </div>
                  </div>

                  <!-- Button -->
                  <div class="control-group">
                    <label class="control-label" for="signin"></label>
                    <div class="controls">
                      <button id="signin" name="signin" class="btn btn-success">Sign In</button>
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
            <div class="tab-pane fade" id="signup">
              <form class="form-horizontal">
                <fieldset>
                  <!-- Sign Up Form -->
                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="Email">Email:</label>
                    <div class="controls">
                      <input id="Email" name="Email" class="form-control" type="text" placeholder="JoeSixpack@sixpacksrus.com" class="input-large" required="">
                    </div>
                  </div>

                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="userid">Alias:</label>
                    <div class="controls">
                      <input id="userid" name="userid" class="form-control" type="text" placeholder="JoeSixpack" class="input-large" required="">
                    </div>
                  </div>

                  <!-- Password input-->
                  <div class="control-group">
                    <label class="control-label" for="password">Password:</label>
                    <div class="controls">
                      <input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
                      <em>1-8 Characters</em>
                    </div>
                  </div>

                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="reenterpassword">Re-Enter Password:</label>
                    <div class="controls">
                      <input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
                    </div>
                  </div>

                  <!-- Multiple Radios (inline) -->
                  <br>
                  <div class="control-group">
                    <label class="control-label" for="humancheck">Humanity Check:</label>
                    <div class="controls">
                      <label class="radio inline" for="humancheck-0">
                    <input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
                      <label class="radio inline" for="humancheck-1">
                    <input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
                    </div>
                  </div>

                  <!-- Button -->
                  <div class="control-group">
                    <label class="control-label" for="confirmsignup"></label>
                    <div class="controls">
                      <button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <center>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </center>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

您可以看到它正在加载选项卡窗格，因为如果将鼠标悬停在模式区域上，则可以看到光标在未显示的不可见输入框上变化。另外，您可以单击其他选项卡，然后就可以返回第一个选项卡了。这是怎么回事？

帮助？

1 个答案:

答案 0 :(得分：1)

fade会导致您的问题，只需将fade中的tabpane删除，它应该可以正常工作。 

<!DOCTYPE HTML>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Text editor</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- Button trigger modal -->
  <button class="btn btn-primary btn-lg" href="#signin" data-toggle="modal" data-target="#myModal">Sign In/Register</button>

  <!-- Modal -->
  <div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <br>
        <ul id="myTab" class="nav nav-tabs">
          <li class="nav-item"><a class="nav-link active" href="#signin" data-toggle="tab">Sign In</a></li>
          <li class="nav-item"><a class="nav-link" href="#signup" data-toggle="tab">Register</a></li>
          <li class="nav-item"><a class="nav-link" href="#why" data-toggle="tab">Why?</a></li>
        </ul>
        <div class="modal-body">
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane " id="why">
              <p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
              <p>
                <br> Please contact <a mailto:href="JoeSixPack@Sixpacksrus.com">JoeSixPack@Sixpacksrus.com for any other inquiries.</a></p>
            </div>
            <div class="tab-pane  active" id="signin">
              <form class="form-horizontal">
                <fieldset>
                  <!-- Sign In Form -->
                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="userid">Alias:</label>
                    <div class="controls">
                      <input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
                    </div>
                  </div>

                  <!-- Password input-->
                  <div class="control-group">
                    <label class="control-label" for="passwordinput">Password:</label>
                    <div class="controls">
                      <input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
                    </div>
                  </div>

                  <!-- Multiple Checkboxes (inline) -->
                  <div class="control-group">
                    <label class="control-label" for="rememberme"></label>
                    <div class="controls">
                      <label class="checkbox inline" for="rememberme-0">
                    <input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
                    Remember me
                    </label>
                    </div>
                  </div>

                  <!-- Button -->
                  <div class="control-group">
                    <label class="control-label" for="signin"></label>
                    <div class="controls">
                      <button id="signin" name="signin" class="btn btn-success">Sign In</button>
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
            <div class="tab-pane fade" id="signup">
              <form class="form-horizontal">
                <fieldset>
                  <!-- Sign Up Form -->
                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="Email">Email:</label>
                    <div class="controls">
                      <input id="Email" name="Email" class="form-control" type="text" placeholder="JoeSixpack@sixpacksrus.com" class="input-large" required="">
                    </div>
                  </div>

                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="userid">Alias:</label>
                    <div class="controls">
                      <input id="userid" name="userid" class="form-control" type="text" placeholder="JoeSixpack" class="input-large" required="">
                    </div>
                  </div>

                  <!-- Password input-->
                  <div class="control-group">
                    <label class="control-label" for="password">Password:</label>
                    <div class="controls">
                      <input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
                      <em>1-8 Characters</em>
                    </div>
                  </div>

                  <!-- Text input-->
                  <div class="control-group">
                    <label class="control-label" for="reenterpassword">Re-Enter Password:</label>
                    <div class="controls">
                      <input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
                    </div>
                  </div>

                  <!-- Multiple Radios (inline) -->
                  <br>
                  <div class="control-group">
                    <label class="control-label" for="humancheck">Humanity Check:</label>
                    <div class="controls">
                      <label class="radio inline" for="humancheck-0">
                    <input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
                      <label class="radio inline" for="humancheck-1">
                    <input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
                    </div>
                  </div>

                  <!-- Button -->
                  <div class="control-group">
                    <label class="control-label" for="confirmsignup"></label>
                    <div class="controls">
                      <button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <center>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </center>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

相关问题
最新问题