gpt4 book ai didi

JavaScript 不保存样式属性

转载 作者:搜寻专家 更新时间:2023-10-31 23:23:20 25 4
gpt4 key购买 nike

我的网站有问题。我想在单击按钮时显示一个 div 并在单击另一个按钮时隐藏它,所以我使用 JavaScript 函数

    function DisplayMessage() {
var messagebox = document.getElementById("messageConfirmation");
messagebox.style.display = "block";
}
function HideMessage() {
var messagebox = document.getElementById("messageConfirmation");
messagebox.style.display = "none";
}

但是当我使用它们时<div>显示和隐藏只是片刻,然后再次出现/消失,我真的不知道什么会导致这样的问题所以我会非常感谢你的回答。完整的 HTML 页面代码:

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
div.wrap {
width: 850px;
margin: 0 auto;
}
div.messageBox{
display:none;
width:500px;
height:60px;
background-color: rgb(200, 200, 175);
}
</style>
<script>
function DisplayMessage() {
var messagebox = document.getElementById("messageConfirmation");
messagebox.style.display = "block";
}
function HideMessage() {
var messagebox = document.getElementById("messageConfirmation");
messagebox.style.display = "none";
}
</script>
</head>
<body>
<div class="wrap">
<div class="messageBox" id="messageConfirmation" >
<p>Message</p>
<form>
<button onclick="HideMessage()">HideME</button>
</form>
</div>
<div>
<form>
<button onclick="DisplayMessage()">ShowMe</button>
</form>
</div>
</div>

</body>
</html>

最佳答案

默认情况下,<button><form> 里面元素将像一个 submit按钮,所以一旦您的代码运行,表单就会被提交并且页面会被刷新,所以它会回到原来的状态。更改其 typebutton为了实现你想要的:

<button type="button" onclick="HideMessage()">HideME</button>

关于JavaScript 不保存样式属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35946896/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com