Question

<html>
<head>
<script>
$("#divId").hide();


$("#div1").click(function (event) {
    $("#divId").show().css({
        position: "absolute",
     top:event.pageY, left: event.pageX
    });
});

</script>
</head>
<body>
<div id="div1"style="height:150px;width:150px;border:1px solid blue;"></div>


<div id="divId" style="height:20px;width:20px; border:1px solid red;">  </div>
</body>
</html>

此程序无效。它需要任何谷歌API？请帮忙。我想创建这样的东西： http://jsfiddle.net/aFACA/32/

Answer 1

您需要包含jQuery库：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

以及将代码包装在 DOM ready 处理程序$(document).ready(function() {...});或更短的$(function() {...});内，以确保在执行之前已正确加载所有DOM元素你的jQuery代码：

$(function () {
    $("#divId").hide();
    $("#div1").click(function (event) {
        $("#divId").show().css({
            position: "absolute",
            top: event.pageY,
            left: event.pageX
        });
    });
});

请记住在包含jQuery后添加上面的脚本。

Answer 2

您需要包含jquery文件。您可以下载它或使用谷歌。请查看以下内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

并且还需要包装$（document）.ready

请检查此链接：http://api.jquery.com/ready/

Answer 3

之前放置你的脚本或将脚本放在$（document）.ready（function {... your code ...}）;

中

Answer 4

在DOM尚未就绪时，您尝试访问DOM。包装您的代码，以便在DOM准备就绪时执行：

  $(document).ready(function () {
        $("#divId").hide();


        $("#div1").click(function (event) {
            $("#divId").show().css({
                position: "absolute",
                top: event.pageY, left: event.pageX
            });
        });
    });

Answer 5

您可以使用angularJs。它有ng-hide和ng-show指令。这将使你的代码只有3,4行

http://docs.angularjs.org/api/ng/directive/ngShow 看一下这个。如果您有任何问题，请告诉我。

Answer 6

将内容放在此div中

<div id="hide">PUT CONTENT YOU WANT TO HIDE HERE</div>

然后使用此网址隐藏div内的内容

<a href="#" onClick="toggle_visibility('hide');">Hide this box for printing!</a>

最后将它放在与div

相同的文件中

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

单击显示div

6 个答案: