尝试显示隐藏文本，文本不断消失

我试着显示一天，具体取决于点击的按钮。理想情况下，我会在三天内使用无线电输入，但按钮让我更接近了。当我点击一个按钮时，文本会出现，然后迅速消失。很明显我做错了什么。TIA，Marc

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form>
<button onclick="changeDay('thu');" style="width: 100%"> Thursday Performance</button><br>
<button onclick="changeDay('fri');" style="width: 100%"> Friday Performance</button><br>
<button onclick="changeDay('sat');" style="width: 100%"> Saturday Performance</button><br>
<div id="thu" style="display:none;">
This is Thursday
</div>
<div id="fri" style="display:none;">
This is Friday
</div>
<div id="sat" style="display:none;">
This is Saturday
</div>
<script language="JavaScript">
function changeDay(show_day) {
document.getElementById('thu').style.display = "none";
document.getElementById('fri').style.display = "none";
document.getElementById('sat').style.display = "none";
document.getElementById(show_day).style.display = "block";
}
</script>
</body>
</html>

这是因为您将按钮包装在<form>标记中，而且它也没有关闭。

我不确定，但我认为，因为您将按钮包装在表单中，所以当您单击按钮时，表单会尝试提交数据，并且由于设置不正确，它会重定向，从而在我的测试中导致错误404。

在这种情况下，您不需要使用表单，当您只调用处理数据的函数时，通常在发送数据时使用表单。

表单上的MDN文档-The HTML form element represents a document section containing interactive controls for submitting information.

不带表单标记的代码段

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button onclick="changeDay('thu');" style="width: 100%"> Thursday Performance</button><br>
<button onclick="changeDay('fri');" style="width: 100%"> Friday Performance</button><br>
<button onclick="changeDay('sat');" style="width: 100%"> Saturday Performance</button><br>
<div id="thu" style="display:none;">
This is Thursday
</div>
<div id="fri" style="display:none;">
This is Friday
</div>
<div id="sat" style="display:none;">
This is Saturday
</div>
<script language="JavaScript">
function changeDay(show_day) {
document.getElementById('thu').style.display = "none";
document.getElementById('fri').style.display = "none";
document.getElementById('sat').style.display = "none";
document.getElementById(show_day).style.display = "block";
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：