Question

我正试图在点击按钮时显示隐藏文字。但是当我加载页面时，文本会显示一秒钟然后消失。为什么会这样？

<div class="container">
  <p class="temp">This is temporary</p>
  <button id="showme">Show</button>
</div>

$(document).ready(function() {
  $(".temp").hide();
  $("#showme").on("click", function() {
    $(".temp").show();
  });
});

Answer 1

尝试了解网页的加载方式。当使用关联的CSS呈现整个页面时，将执行您的jquery。因此浏览器会显示您的文本一秒钟，直到它执行jquery来隐藏该文本。因此，您的浏览器需要知道在解析html时隐藏此文本。您可以通过为文本提供CSS样式来实现此目的。

CSS：

.temp {
  display: none;
}

HTML：

<div class="container">
  <p class="temp">This is temporary</p>
  <button id="showme">Show</button>
</div>

JS：

$(document).ready(function() {
  $("#showme").on("click", function() {
    $(".temp").show();
  });
});

Answer 2

您应该在<!DOCTYPE html>  <html> <head> <script type="text/javascript" src="food.js"> </script> </head> <body> <h3>The Chuff Bucket</h3> Enter the food you want to order <input type="text" id="userInput" name="input" onkeyup="sendInfo()"></input> <div id="underInput"></div> </body> </html>标记中使用内嵌样式标记，如下所示：

%-- 
Document   : index
Created on : 15 Dec, 2016, 7:07:55 PM
Author     : KRISHNAJI
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%   
  String food = request.getParameter("food");
  String foodArray[] = {"Vada Pav", "Samosa Pav", "Pav Bhaji", "Misal Pav"};

  for(int i = 0; i < foodArray.length; i++)
  {
    if(food.equalsIgnoreCase(foodArray[i]))
    {
      out.println("Hey we do have " + food);
    }
    else if (food == "")
    {
      out.println("Enter a food");
    }
    else
    {
      out.println("We don't have " + food);
    }
  }
%>
</body>
</html>




[1]: https://i.stack.imgur.com/sBHnZ.jpg
[2]: https://i.stack.imgur.com/Xv7fG.jpg

而不是将其隐藏在jQuery中！

＆＃13;

<p>

＆＃13;

<p class="temp" style="display: none;">This is temporary</p>

＆＃13;

切换显示显示隐藏元素一秒钟

2 个答案: