0

我正在建立一个包含四个链接的主页，这些链接是四个不同的图像。单击一个时，我希望使用 jQuerys 隐藏/显示效果在相应链接附近出现一个新图像。现在我很难让它工作。

的HTML：

<img src="images/images/grey_shape1.png" class="grey_shape1"/>
<img src="images/images/grey_shape2.png" class="grey_shape2"/>
<img src="images/images/grey_shape3.png" class="grey_shape3"/>
<img src="images/images/grey_shape4.png" class="grey_shape4"/>

<div id="green_box_container">
<a href="#"><div id="green_box1"><img src="images/lilacs_small.jpg" /></div></a>
<a href="#"><div id="green_box2"><img src="images/lilacs_small.jpg" /></div></a>
<a href="#"><div id="green_box3"><img src="images/lilacs_small.jpg" /></div></a>
<a href="#"><div id="green_box4"><img src="images/lilacs_small.jpg" /></div></a>
</div>

*目前我对所有 4 个链接使用相同的图像——稍后会更改。

当一个 div 被选中时，我需要做两件事。一，选定的 div 变大了（这已经可以工作了），二，新图像出现了。后者没有发生。

jQuery：

// this part is working fine
    $("#green_box_container a").click(function() {
          $(this).children().animate({height:105,width:105}, 'medium')
          $(this).siblings().children().animate({height:80,width:80}, 'medium')
    })

// this isn't
    $("#green_box1").click(function() {
        $(".grey_shape1").show("normal");

        })      
})

编辑：这里也是一个小提琴http://jsfiddle.net/vN4hu/

我目前正在使用#green_box1。感谢所有帮助！

4

2 回答 2

1

问题

jQueryshow()方法操作元素的 CSSdisplay属性。由于您的图像被visibility属性隐藏，即visibility:hidden;，该show()方法对它们没有可见的影响（双关语：）。

解决方案

删除该visibility属性，并使用该属性隐藏您的图像display：

img {
   ...
   display:none;
   ...
}
于 2013-03-21T08:24:21.100 回答
0

我做了一些更改，似乎工作正常：

CSS：

 .grey_shape1 {
    position: absolute;
    display:none; // <----this
    top: 50px; //<--------this
    left: 50px; //<-------this
    z-index: -3;
 }

似乎在这里工作

于 2013-03-21T08:30:44.230 回答