javascript - 使用 jquery 使 div 元素显示不会持续很长时间

Question

Here i have a jquery function that displays the #showhide div element after successful login but the #showhide displays for a second or two and disappears from the screen Could some one tell me why is this happening! please!

我已经发布了完整的代码!因为有些人可能会要求它!如果它令人困惑，只需检查 css 我有 #showhide 作为显示:无，我试图在身份验证后使其在 Jquery 中再次显示，但它没有显示超过 2 秒，这是此代码中的唯一问题

   

 myfunction = function() {
  $('#text-hide').show();
}


myfunction2 = function() {
  $('#photo-hide').show();
}


validate_logincredentials = function() {
  var email = document.getElementById("email").value;
  var pass = document.getElementById("pass").value;
  var atposition = email.indexOf("@");
  var dotposition = email.lastIndexOf(".");

  if (atposition < 1 || (dotposition - atposition < 2))
  /* if user gives email which starts with @ or if there is no words inbetween (@) and (.)  */
  {
    alert("Please enter correct email ID");

  } else if (pass.length < 8) {
    alert("Incorrect password");
  } else if (email !== "faizalsharn@yahoo.com" && pass !== "faizalwddm12") {
    alert("incorrect credentials")
  } else {
    alert(email);
    alert(pass);
    alert("User login Successfull");
    $('#login-form').hide();
    $('#showhide').show();
  }
}

   

 #showhide {
  transition-delay: 3s;
  display: none;
}

html, body {
  margin: 0%;
  padding: 0%;
  width: 100%;
  height: 100%;
}

header {
  width: 100%;
  height: 5%;
  background-color: black;
  color: white;
  float: left;
}

header h3 {
  margin: 5%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  float: left;
  position: relative;
  margin-top: .5%;
  margin-right: 2%;
}

header h3:hover {
  TEXT-TRANSFORM: UPPERCASE;
  text-shadow: 4px 4px 8px red;
}

header p:hover {
  TEXT-TRANSFORM: UPPERCASE;
  text-shadow: 4px 4px 8px blue;
}

#logo {
  width: 3%;
  height: 100%;
  margin-left: 1%;
  display: inline;
  float: left;
  margin-right: -5%;
}

#icons * {
  color: white;
  display: inline;
  float: left;
  margin: .5% 2% 0% 2%;
  padding: 0% 2% 0% 2%;
}

#icons p {
  margin-left: 50% !important;
  margin-top: -25% !important;
}

nav {
  width: 17%;
  height: 90%;
  float: left;
  float: left;
}

nav img {
  position: relative;
  width: 50%;
  height: 15%;
  margin-left: 5%;
  margin-top: 3%;
  margin-bottom: 5%;
  float: left;
}

#text-hide {
  display: none;
}

#photo-hide {
  display: none;
}

#text-hide span {
  padding: 5%;
  margin-left: 5%;
}

#photo-hide img {
  width: 37%;
  padding: 5%;
  margin: -5%;
  float: left;
  margin-right: 0%;
  margin-bottom: 2%;
  margin-top: 5%;
  margin-left: 1%;
}

#profileinfo i {
  margin-top: 1%;
  padding: 6%;
  display: inline;
  margin-left: -1%;
  width: 50%;
  height: 50%;
  float: left;
  margin-right: -30%;
}

#profileinfo h4 {
  display: inline;
  margin-right: -10%;
  font-size: 80%;
  margin-left: -10%;
  float: left;
  margin-top: 8%;
}

#profileinfo img {
  width: 40%;
  height: 40%;
  float: left;
}

aside {
  float: right;
  width: 17%;
  height: 90%;
}

aside h2 {
  margin-left: 5%;
}

aside h3 {
  margin-left: 10%;
}

aside img {
  width: 50%;
  height: 50%;
  float: left;
  margin-left: 10%;
}

aside p {
  float: left;
  margin-left: 5%;
}

main {
  width: 66%;
  height: 90%;
  float: left;
  position: relative;
}

#status {
  border: 1px solid gray !important;
  width: 80%;
  height: 5%;
  margin-left: 3%;
}

#content {
  margin-top: 5%;
  margin-left: 1%;
}

#content img {
  width: 7%;
}

#content h4 {
  display: inline;
}

footer {
  bottom: 0px;
  width: 100%;
  height: 5%;
  float: left;
  background-color: black;
  color: white;
  padding-top: 1%;
}

#ad {
  margin-left: 23%;
  margin-right: 0%;
}

.fa-audio-description {
  margin-top: .25%;
}

.button {
  background-color: white;
  /* background color of the button */
  border: none;
  /* no border for the button */
  padding: 8px 16px 8px 16px;
  /*distance between element's content and its borders. top right bottom left */
  text-align: center;
  display: inline-block;
  font-size: 16px;
  /* font size inside button */
  margin: 16px 4px 12px 8px;
  /*create space around elements by outer border */
  transition-duration: 0.4s;
  /* defines the speed of the transfomation effect */
  cursor: pointer;
  /*cursor changes to pointer shape when its on top of the button */
  box-shadow: 0 9px #999;
  /* TO GIVE SHADOW TO THE BUTTON */
  color: black;
  /* text of the font inside the button which says "green blue etc */
}

.button:active {
  transform: translateY(4px);
  /* TO GIVE THE BUTTON PRESSED FEEL TO THE USER i.e it makes the button move y-axis (or move down) by 4px */
}

.button1 {
  border: 2px solid #4CAF50;
  border-radius: 8px;
  stroke-width: 5;
  stroke-dasharray: 10;
  transition: all 1.5s ease-out;
  /* the speed at which the effect of hover should take place */
}

.button1:hover {
  background-color: #4CAF50;
  /* WHEN WE HOVER BG COLOR OF BUTTON CHANGES TO  #4CAF50 ( WHICH IS GREEN) */
}

.button2 {
  border: 2px solid #f44336;
  border-radius: 8px;
  stroke-width: 5;
  stroke-dasharray: 10;
  /*defines space in between dashes in the stroke.*/
  transition: all 1.5s ease-out;
  /* the speed at which the effect of hover should take place */
}

.button2:hover {
  background-color: #f44336;
}

.button3 {
  border: 2px solid #008CBA;
  border-radius: 8px;
  stroke-width: 5;
  stroke-dasharray: 10;
  transition: all 1.5s ease-out;
  /* the speed at which the effect of hover should take place */
}

.button3:hover {
  background-color: #008CBA;
}

#profileinfo h4:hover {
  color: rgba(5, 5, 5, 0.3);
  font-style: italic;
  /*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
  TEXT-TRANSFORM: UPPERCASE;
  text-shadow: 4px 4px 8px blue;
}

#profileinfo h3:hover {
  color: rgba(224, 19, 19, 0.3);
  font-style: italic;
  /*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
  TEXT-TRANSFORM: UPPERCASE;
  text-shadow: 4px 4px 8px blue;
}

#text-hide span:hover {
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
  text-shadow: 4px 4px 8px blue;
}

#content p:hover {
  color: rgba(0, 0, 0, 0.3);
  TEXT-TRANSFORM: capitalize;
  text-shadow: 4px 4px 8px blue;
}

#photo-hide img:hover {
  display: inline-block;
  margin-right: 2px;
  /* left and right margin of flex elements inside this element container */
  margin-left: 2px;
  animation: roll 3s infinite;
  transform: rotate(30deg);
  text-indent: 25px;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#logo:hover {
  animation: roll 3s infinite;
  transform: rotate(30deg);
}

/*larger screen computers*/

@media screen and (min-width:1620px)
/*for screen width 1600 and above */

  {
  /*need to increase the image and font sizes*/
  body {
    font-size: 150%;
  }
  .button {
    padding: 16px 32px 16px 32px;
    margin: 32px 8px 24px 32px;
    box-shadow: 0 12px #999;
  }
  #status {
    font-size: 140%;
  }
  #photo-hide img {
    width: 50%;
    height: 50%;
    margin-top: 1%;
  }
  aside img {
    width: 70%;
    height: 70%;
  }
  #profileinfo img {
    width: 50%;
    height: 50%;
  }
  #content img {
    width: 10%;
  }
  #profileinfo i {
    margin-right: -35%;
  }
  #profileinfo h4 {
    display: inline;
    margin-right: -10%;
    font-size: 80%;
    margin-left: -10%;
    float: left;
    margin-top: 8%;
  }
  #status {
    height: 4%;
  }
}

/*tablet*/

@media screen and (max-width:960px)
/* for screen size 960 and below */

  {
  header {
    width: 40%;
    height: 50%;
    float: left;
    overflow: auto;
  }
  header h3 {
    margin: 2.5%;
    margin-top: .25%;
    margin-bottom: 25%;
  }
  /**/
  #icons i {
    padding: 45%;
    margin-left: -25%;
  }
  #icons p {
    margin-left: -50%;
    font-size: 55%;
    padding-right: 20%;
  }
  #icons i:hover {
    text-shadow: 4px 4px 8px blue;
  }
  #status {
    height: 3%;
  }
  main {
    width: 100%;
  }
  nav {
    width: 60%;
    height: 50%;
    float: left;
  }
  #profileinfo img {
    width: 30% !important;
    height: auto;
  }
  aside {
    width: 100%;
  }
  footer {
    width: 100%;
    height: 10%;
    float: left;
    bottom: 0px;
  }
  body {
    font-size: 100%;
  }
  .button {
    padding: 4px 8px 4px 8px;
    font-size: 8px;
    margin: 30px 2px 6px 4px;
    box-shadow: 0 4px #999;
  }
  #status {
    font-size: 70%;
  }
  #photo-hide img {
    width: 25%;
    height: 20%;
    margin-top: -4%;
    margin-right: 10%;
  }
  aside img {
    width: 20%;
    height: 20%;
  }
  /**/
  #profileinfo img {
    width: 20%;
    height: 15%;
  }
  #content img {
    width: 20%;
  }
  #profileinfo i {
    margin-right: -18%;
    margin-bottom: -10%;
  }
  #profileinfo h4 {
    display: inline;
    margin-right: -40%;
    font-size: 50%;
    margin-left: -30%;
    float: left;
    margin-top: 8.5%;
  }
  #tomove {
    margin-top: 50%;
    margin-left: -65%;
  }
  #text-hide span {
    font-size: 70%;
    margin-right: 10%;
  }
  #logo {
    width: 25%;
    height: 10%;
    margin: 10%;
  }
  aside h3 {
    margin-left: 5%;
    padding: 5%;
    margin-top: 10%;
  }
  .fa-audio-description {
    margin-top: 2%;
  }
}

   

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>facechat</title>
  <script src="script.js"></script>

  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="form.css" rel="stylesheet" type="text/css" />
  <link href='https://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet'>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel='stylesheet'>
  <!-- for boot strap icons-->


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

  <script type="text/javascript">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <div id="login-form">
    <!-- gives the toggle effect between login and register -->
    <input type="radio" checked id="login" name="switch" class="hide">
    <input type="radio" id="signup" name="switch" class="hide">
    <!-- bootstrap icons that does not require download or install-->
    <div>
      <ul class="form-header">
        <li><label for="login"><i class="fa fa-unlink"></i> LOGIN</label></li>
        <li><label for="signup"><i class="fa fa-credit-card"></i> REGISTER</label></li>
      </ul>
    </div>

    <div class="section-out">
      <section class="login-section">
        <div class="login">
          <form action="">
            <!-- on login i have to put the url of the backend class to handle it -->
            <ul class="ul-list">
              <li><input type="email" required class="input" placeholder="Email ID" id="email" /><span class="icon"><i class="fa fa-user-secret" style="font-size:20px"></i></span></li>
              <li><input type="password" required class="input" placeholder="Password" id="pass" /><span class="icon"><i class="fa fa-lock" style="font-size:20px"></i></span></li>
              <li><span class="remember"><input type="checkbox" id="check"> <label for="check">Remember Me</label></span><span class="remember"><a href="">Forgot Password</a></span></li>
              <!-- on forgot password i have to put the url of the backend class to handle it -->
              <li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()" /></li>
            </ul>
          </form>
        </div>

      </section>

      <section class="signup-section">
        <div class="login">
          <form action="">
            <!-- on registration i have to put the url of the backend class to handle it -->
            <ul class="ul-list">
              <li><input type="text" required class="input" placeholder="Your Name" id="R_name" /><span class="icon"><i class="fa fa-user" style="font-size:20px"></i></span></li>
              <li><input type="number" required class="input" placeholder="Your Number (no plus or minus signs)" id="R_number" pattern="('^\\d+$')" title="Must contain only numbers" required/><span class="icon"><i class="fa fa-mobile-phone" style="font-size:25px"></i></span></li>
              <li><input type="email" required class="input" placeholder="Your Email" id="R_email" /><span class="icon"><i class="fa fa-envelope" style="font-size:15px"></i></span></li>
              <li><input type="password" placeholder="Password" required class="input" id="R_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
              <li><input type="password" placeholder="Retype Password" required class="input" id="Rc_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
              <li><input type="checkbox" id="check1"> <label for="check1">I accept terms and conditions</label></li>
              <li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
            </ul>
          </form>
        </div>

      </section>
    </div>

  </div>
  <div id="showhide">
    <header>
      <img id="logo" src="images/Captureimg.PNG" alt="logo">
      <h3>Blake wood</h3>
      <div id="icons">
        <a href="#"><i class="fa fa-home"></i>
               <p>Home</p></a>
        <a href="#"><i class="fa fa-globe"></i>
               <p>News</p></a>
        <a href="#"> <i class="fa fa-envelope"></i>
               <p>Message</p></a>
        <a href="#"> <i class="fa fa-bell"></i>
               <p>Notification</p></a>
      </div>
    </header>


    <nav>
      <div id="profileinfo">
        <img src="images/blake.jpg" alt="profilepic" />

        <i class="fa fa-suitcase"></i>
        <h4>Designer-UI</h4>

        <i class="fa fa-home"></i>
        <h4>Ontario-CA</h4>

        <i class="fa fa-birthday-cake"></i>
        <h4>July-26-1991</h4>
      </div>

      <div id="friends">
        <button id="tomove" class="button button3" onclick="myfunction()"><i class="fa fa-users fa-fw"></i> My Friends</button>
        <div id="text-hide">
          <span>Gafur</span><span>Vinoth</span></br><span>Azeek</span><span>Azad</span>
        </div>
      </div>

      <div id="photos">
        <button class="button button3" onclick="myfunction2()"> <i class="fa fa-circle-o-notch fa-fw"></i> Photos</button>
        <div id="photo-hide">
          <img src="images/slider_1.png" alt="my photo1">
          <img src="images/slider-2.png" alt="my photo2">
          <img src="images/slider-3.png" alt="my photo3">
          <img src="images/silder-4.png" alt="my photo4">
        </div>
      </div>

    </nav>
    <main>
      <div class="flexslider">
        <ul class="slides">
          <li>
            <img src="images/slider_1.png" alt="sliderimage1" />
          </li>
          <li>
            <img src="images/slider-2.png" alt="sliderimage2" />
          </li>
          <li>
            <img src="images/slider-3.png" alt="sliderimage3" />
          </li>
          <li>
            <img src="images/silder-4.png" alt="sliderimage4" />
          </li>
        </ul>
      </div>

      <input type="text" id="status" contenteditable="true" value="Good Morning!" />
      <button class="button button3"><i class="fa fa-pencil"></i>Post</button>

      <div id="content">
        <img src="images/carlos.jpg" alt="Avatar">
        <h4>Carlos</h4> <span>(17 min ago)</span>
        <p>The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it :)
        </p>
        <button class="button button3"><i class="fa fa-thumbs-up"></i>  Like</button>
        <button class="button button3"><i class="fa fa-comment"></i>  Comment</button>
      </div>
    </main>
  
    <aside>
      <div>
        <h2>Friend Requests</h2>
        <h3>Carlos</h3>
        <img src="images/carlos.jpg" alt="Avatar">
        <button class="button button1"><i class="fa fa-check"></i>Accept</button>
        <button class="button button2">Decline<i class="fa fa-remove"></i></button>

        <br></br>

        <h3>Cathrine</h3>
        <img src="images/cathrine.png" alt="Avatar">
        <button class="button button1"><i class="fa fa-check"></i>Accept</button>
        <button class="button button2">Decline<i class="fa fa-remove"></i></button></br>

      </div>
    </aside>

    <footer>
      <i id="ad" class="fa fa-audio-description"></i><span> If you like my work on photoshop css,js,jquery and wish to hire me part time, contact me @ faizalsharn@yahoo.com <i class="fa fa-hand-peace-o"></i></span>
    </footer>
  </div>
</body>

</html>

Answer 1

因为您不打算使用服务器，所以不需要提交按钮。因此，如果您需要输入 type="submit"，那么您需要从您尝试验证的每个函数中重新运行 false。

否则更改这些行...

<li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>

对此。

<li><input type="button" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="button" value="SIGN UP" class="btn" onclick="validate2()"></li>

一切都会好起来的。