向 div 元素添加 onclick 事件

我看到了一些类似的主题，这确实有帮助，但我有具体的问题，并没有设法解决它，所以如果有人可以帮助我会很感激

我想将 onclick 事件添加到一个 div 元素。

HTML:

<div id="thumb0" class="thumbs" onclick="klikaj('rad1')"></div>

JavaScript:

function klikaj(i)
{
document.getElementById(i).style.visibility='visible';
}

想要的结果: 使用 id="rad1"(隐藏)的 div 在使用 id="thumb0"单击 div 时变为可见。

当我将它添加到一个按钮元素但不知道如何处理 div 元素时，这种方法就可以工作。

472103 次浏览
小开

我不知道问题出在哪里; 按照预期运行以下命令:

<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">knock knock</div>
​<div id="rad1" style="visibility: hidden">hello world</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script>
function klikaj(i) {
document.getElementById(i).style.visibility='visible';
}
</script>

参见: http://jsfiddle.net/5tD4P/

小开

我认为您使用 //--style="display:none"--//隐藏 div。

使用以下代码:

<script>
function klikaj(i) {
document.getElementById(i).style.display = 'block';
}
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">Click Me..!</div>
<div id="rad1" class="thumbs" style="display:none">Helloooooo</div>
小开

取决于您如何隐藏您的 div，diplay=none是不同的 visibility=hidden和 opacity=0

  • 可见性然后使用 ...style.visibility='visible'

  • 显示然后使用 ...style.display='block'(或其他取决于如何
    你可以设置你的 css，inline，inline-block，flex...)

  • 不透明度然后使用 ...style.opacity='1';

小开

也许你的脚本选项卡有问题。

如果您设置类型，必须 Type = “ application/javascript”。

<!DOCTYPE html>
<html>
<head>
<title>
Hello
</title>
</head>
<body>
<div onclick="showMsg('Hello')">
Click me show message
</div>
<script type="application/javascript">
function showMsg(item) {
alert(item);
}
</script>
</body>
</html>
小开

中指定 onclick 事件是可能的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="thumb0" class="thumbs" onclick="fun1('rad1')" style="height:250px; width:100%; background-color:yellow;";></div>
<div id="rad1" style="height:250px; width:100%;background-color:red;" onclick="fun2('thumb0')">hello world</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script>
function fun1(i) {
document.getElementById(i).style.visibility='hidden';
}
function fun2(i) {
document.getElementById(i).style.visibility='hidden';
}
</script>
</body>
</html>

提交答案