试图在jQuery中显示DIV

时间:2022-08-26 19:58:18

I have this java code:

我有这个java代码:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");

$("a#more").click(function() {

$("#info_box").show("blind", { direction: "vertical" }, 800);

});
</script>

And this link:

这个链接:

<a href="#" id="more">More Info...</a>

info_box is just a div with the properties:

info_box只是一个包含属性的div:

width: 30%;
position: absolute;
left: 35%;
top: 250px;
background-color: #FFFFFF;
border: 2px solid #000000;
visibility: hidden;

How can this not be working, been trying to figure it out for 20 minutes.

这怎么可能不起作用,试图找出它20分钟。

3 个解决方案

#1


4  

You may use the ready() function and display: none in the initial CSS

您可以在初始CSS中使用ready()函数和display:none

Working HTML:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
    function()
    {
            $("a#more").click(function() {
                $("#info_box").show("blind");
            });
});
</script>
<style>
    #info_box {
        width: 30%;
        position: absolute;
        left: 35%;
        top: 250px;
        background-color: #FFFFFF;
        border: 2px solid #000000;
        display: none;}
</style>
</head>
<body>

<a href="#" id="more">More Info...</a>

<div id="info_box">Secret info goes here</div>


</body>
</html>

There are problems with the show function also. You are using a not documented params. Use the "animate" function instead to do a custom animation.

show功能也存在问题。您正在使用未记录的参数。使用“animate”功能代替自定义动画。

I also recommend you to use Firebug to troubleshot javascript problems in the future.

我还建议你将来使用Firebug解决javascript问题。

#2


1  

Are you sure you're calling the right function? According to the docs at http://docs.jquery.com/Effects/show the show function takes a speed as the first parameter, and a callback function as the second. Your "blind" and { direction: "vertical" } are misplaced I think.

你确定你正在调用正确的功能吗?根据http://docs.jquery.com/Effects/show上的文档,show函数将速度作为第一个参数,将回调函数作为第二个参数。我认为你的“盲目”和{方向:“垂直”}是错位的。

Also worth checking there's no conflict with another script e.g. mootools.

还值得检查,与其他脚本没有冲突,例如mootools的。

#3


0  

I had the exact same problem. You need to load the jQuery ui plugin as well as normal Jquery to use the format you have there.

我有同样的问题。你需要加载jQuery ui插件以及普通的Jquery来使用你在那里的格式。

#1


4  

You may use the ready() function and display: none in the initial CSS

您可以在初始CSS中使用ready()函数和display:none

Working HTML:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
    function()
    {
            $("a#more").click(function() {
                $("#info_box").show("blind");
            });
});
</script>
<style>
    #info_box {
        width: 30%;
        position: absolute;
        left: 35%;
        top: 250px;
        background-color: #FFFFFF;
        border: 2px solid #000000;
        display: none;}
</style>
</head>
<body>

<a href="#" id="more">More Info...</a>

<div id="info_box">Secret info goes here</div>


</body>
</html>

There are problems with the show function also. You are using a not documented params. Use the "animate" function instead to do a custom animation.

show功能也存在问题。您正在使用未记录的参数。使用“animate”功能代替自定义动画。

I also recommend you to use Firebug to troubleshot javascript problems in the future.

我还建议你将来使用Firebug解决javascript问题。

#2


1  

Are you sure you're calling the right function? According to the docs at http://docs.jquery.com/Effects/show the show function takes a speed as the first parameter, and a callback function as the second. Your "blind" and { direction: "vertical" } are misplaced I think.

你确定你正在调用正确的功能吗?根据http://docs.jquery.com/Effects/show上的文档,show函数将速度作为第一个参数,将回调函数作为第二个参数。我认为你的“盲目”和{方向:“垂直”}是错位的。

Also worth checking there's no conflict with another script e.g. mootools.

还值得检查,与其他脚本没有冲突,例如mootools的。

#3


0  

I had the exact same problem. You need to load the jQuery ui plugin as well as normal Jquery to use the format you have there.

我有同样的问题。你需要加载jQuery ui插件以及普通的Jquery来使用你在那里的格式。