gpt4 book ai didi

javascript - 使用javascript隐藏/显示html div

转载 作者:行者123 更新时间:2023-11-28 17:35:50 26 4
gpt4 key购买 nike

我的问题还没有被问到,因为我不想知道如何在 html 中隐藏/显示 div 元素,但我想知道为什么我的方法不起作用。即使我使用了“onclick”事件,我的 javascript 函数也会执行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>show&hide</title>
<link rel="stylesheet" type="text/css" href="stile.css" />
</head>
<body>
<button id="p1">show</button>
<button id="p12">hide</button>
<div id="scritta" class="hiddendiv">text to show</div>
<script type="text/javascript">
function show() {
document.getElementById('scritta').className='visiblediv';
}

function hide() {
document.getElementById('scritta').className='hiddendiv';
}

function inizializza() {
var p1 = document.getElementById("p1");
p1.onclick = show();
var p2 = document.getElementById("p2");
p2.onclick = hide();
}

window.onload= inizializza;
</script>
</body>
</html>

这是我的 CSS 类:

.hiddendiv {
display:none;
}
.visiblediv {
display:block;
}

最佳答案

您的代码中有几个问题:

  1. 第二个按钮的 ID 应该是 p2 而不是 p12
  2. 你必须像这样分配你的事件处理程序
    p1.onclick = show;
    而不是这样
    p1.onclick = show();

添加括号将执行该方法,而不是将其绑定(bind)为事件处理程序。

这是一个 fiddle .

关于javascript - 使用javascript隐藏/显示html div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25094019/

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