我正在使用Python Flask处理网页，我希望该网页在用户提交表单后的加载期间显示图像。我尝试将元素"loading_gif"设置为在单击表单之前显示为 none，然后顶部的 javascript 函数应该使其在背景内容隐藏时可显示。
问题是当我加载网页时，图像已经在那里。提交表单后，背景内容消失，图像保留，因此JS功能似乎工作正常。我只是不确定为什么图像一开始没有隐藏。
在 img { display：none} 部分，我尝试使用 loading_gif 而不是 img 和 #loading_gif，但两者都不起作用。
<!DOCTYPE html>
<html lang = "en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script type = "text/javascript">
function loading(){
document.getElementById("loading_gif").style.display = 'block';
document.getElementById("content").style.display = 'none';
}
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
img {
display: none;
}
</style>
<body>
<img id = "loading_gif" src="{{url_for('static', filename='image.gif')}}">
<div id = "content">
<h1><center>Track Your Packages!</center></h1>
<center>UPS, USPS, or FedEx</center>
<form method = "POST">
<input type = "text", placeholder = "Add Tracking Number", name = "AddTrackingNum">
<input class = "btn btn-primary" type = "submit", onclick = "loading(); return False;">
</form>
<form method = "POST">
<input type = "text", placeholder = "Remove Tracking Number", name = "RemoveTrackingNum">
<input class = "btn btn-primary" type = "submit">
</form>
<body>Last update: {{current_dateTime}}</body>
<div class="container" style="min-height:100% width:80%">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block body %}{% endblock %}
</div>
<table>
<tr>
<th>Company</th>
<th>Tracking Number</th>
<th>Location</th>
<th>Status</th>
<th>As of </th>
<th>Scheduled Delivery Date</th>
</tr>
{%for i in tableDict%}
<tr>
{%for y in tableDict[i]%}
<td>{{y}}</td>
{%endfor%}
{%endfor%}
</tr>
</table>
</div>
</body>
</html>
这是因为语法问题，您需要关闭"tr：nth-child(偶数("大括号 样式应如下所示：
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
img {
display: none;
}
</style>