使用手风琴菜单进行图像演示 [英] Image presentation using an accordion menu
问题描述
我有一个像这样的菜单:
<ul class="leve1">
<li>
<div class="some">
<a href="images/image1.jpg">image1</a>
<a href="images/image2.jpg">image2</a>
<a href="images/image3.jpg">image3</a>
...
</div>
</li>
...
</ul>
并且我在html的另一个位置也有一个div
<div id="dest"></div>
我想单击链接,并使图像显示在div中.我已经尝试过一些
$(document).ready(function () {
$("div.some a").click(function (event) {
event.preventDefault();
$("div#dest").html($("<img>").attr("src", this.href).fadeIn(1000));
});
});
但是它什么也没做. div保持空白.
我已经搜索了这些论坛,但找不到适当的答案.
更新
我也有一些JavaScript可以使上面的菜单变成一个倒塌的菜单.这些指令(隐藏,显示和切换-一堆!)是否可以与此代码相冲突??
您在添加图像后立即调用了fadeIn:如果图像加载时间太长怎么办?它显示在淡入淡出的中间或淡入淡出之后: jsfiddle.net/Xt5La/ >
您可以在图像上使用加载处理程序,请参见以下小提琴: jsfiddle.net/UNqJh/.
var img = new Image();
img.onload = loaded;
img.src = url;
function loaded() { // load handler }
在旁注中,它也可能有助于查看图像是否实际加载. 但更简单的是,您的控制台怎么说?图像是否已添加到DOM?
I have a menu like this:
<ul class="leve1">
<li>
<div class="some">
<a href="images/image1.jpg">image1</a>
<a href="images/image2.jpg">image2</a>
<a href="images/image3.jpg">image3</a>
...
</div>
</li>
...
</ul>
and I also have a div in another location in my html
<div id="dest"></div>
I want to click in the link and make the image appear in the div. I've tried some codelines like
$(document).ready(function () {
$("div.some a").click(function (event) {
event.preventDefault();
$("div#dest").html($("<img>").attr("src", this.href).fadeIn(1000));
});
});
but it doesn't do anything. The div remains blank.
I've searched these forums but couldn't find an adequate answer.
Update
I also have some javascript to make the above menu a colapsing one. Can these intructions (hide, show and toggle - a bunch of them!) be colliding with this code???
Your calling fadeIn right after adding the image : what if the image takes too much time to load ? It gets displayed in the middle of the fade or after the fade is over : jsfiddle.net/Xt5La/
You can use a load handler on images, see this fiddle : jsfiddle.net/UNqJh/.
var img = new Image();
img.onload = loaded;
img.src = url;
function loaded() { // load handler }
On a sidenote it could also help to see if image is actually loaded. But simpler is, what does your console say ? Is the image added to the DOM ?
这篇关于使用手风琴菜单进行图像演示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!