63

我看到了一些类似的主题，它们确实有帮助，但我有特定的问题，并没有设法单独解决，所以如果有人能提供帮助，我将不胜感激

我想将 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 时，带有（隐藏的）的 div 变为可见id="thumb0"。

这在我将它添加到按钮元素但不知道它如何与 div 元素一起使用时有效。

4

5 回答 5

51

我不确定问题是什么；运行以下按预期工作：

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

另见：http: //jsfiddle.net/5tD4P/

于 2012-10-18T01:36:20.447 回答
6

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

如果您设置类型，则必须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>
于 2018-03-15T15:24:58.713 回答
2

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

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

  • 显示然后使用...style.display='block'（或其他取决于
    你如何设置你的 css、内联、内联块、flex ...）

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

于 2017-10-20T14:08:37.110 回答
0

我认为您//--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>
于 2012-10-18T09:22:13.003 回答
0

有可能，我们可以在中指定 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>
于 2019-11-08T09:10:40.133 回答