0

在我的 HTML 页面上，我有：

4 个图像排成一排，1 个 div 紧挨着下面 - 折叠。

根据用户单击的图像，我想将相应的外部页面内容加载到该 DIV 中（使用 ajaxpage.js？）。

当内容被加载到 DIV 中时，DIV 应该通过滑动操作打开。（使用 jquery.togglr.js？）

我还希望浏览器自动向下滚动到展开的 DIV，否则，用户可能看不到已切换打开的额外内容。滚动应该有缓动效果。（使用 jquery.scrollTo.js？）

最后，如果用户单击打开 DIV 的同一图像，它应该关闭 DIV。如果用户单击另一个已打开 DIV 的图像，则只需加载新内容，而无需关闭并打开 DIV。

困难在于如何正确集成所有不同的 jquery 插件以获得所需的行为？

谢谢。

4

1 回答 1

0

好吧，首先，您需要在 4 个图像上添加一个click 事件处理程序：

$('img.fourImageCssClass').click(function(){
    // do something on click.  $(this) is an object that represents your clicked image
    var imgSrc = $(this).attr('src');
});

接下来，您需要<div>在单击处理程序函数中获取对您的引用：

var yourDiv = $('#div-id');

然后，您可以使用$.ajax() 方法来获取内容并将其加载到您的 div 中。完成后，slideUp / slideDown函数将负责打开/关闭 div。

最后，为了平滑滚动，您只需为窗口的scrollTop 属性设置动画即可。要知道滚动到哪里，您可以获取 div 的offset()或position()。

于 2010-08-05T23:47:59.477 回答