Question

请告诉我这个问题是否有一个简单的答案。

我正在构建一个在页面中间带有水平导航栏的网站

导航栏包含6个按钮（“关于我们”，“服务”，“近期工作”，“常见问题解答”，“报价”，“我们合作”）

我已经设法让jQuery将html页面中的div加载到导航栏上方的div中。

如下：

$(document).ready(function() {
   $('#navigation a').click(function() {
      $('#slider').hide();
      $('#slider').load($(this).attr('href')).slideDown(1000);
      return false; 
   }).eq(0).click();
});

然而，在导航栏以下的空间我还想为每个按钮加载不同的图像我点击

例如，当我点击“关于我们”按钮时，名为#slider的div会将aboutus.html页面中的#content div加载到导航栏上方的#top_slider div中，但我还需要相关的aboutus.jpg加载到位于导航栏下方的#bottom_slider div。

因此，基本上对于每个单击的导航按钮，导航栏上方和下方的div同时滑动。

有什么想法吗？

Answer 1

试试这个：

$(document).ready(function() {
  $('#navigation a').click(function(event) {
    event.preventDefault(); // prevent following the link in the browser
    var img_src = $(this).attr('data-img-src');
    $('#slider, #img-holder').hide();
    $('#slider').load($(this).attr('href'), function() {
      // load the image
      $("#img-holder").empty().html($("<img>").attr("src", img_src));
      // show both DIVs
      $("#slider, #img-holder").slideDown(1000);
    });
  }).eq(0).click();
});

要使用此功能，请在希望显示图像的位置添加div #img-holder。将属性"data-img-src="/path/to/img.jpg"添加到导航栏中的链接，例如

<a href="about.html" data-img-src="about.jpg">About</a>

jQuery同时加载多个div

1 个答案: