动态加载&控制多个内容区域

Question

如果我在这里表现得知识不够，我提前道歉。我是一名正在努力学习的设计师。

因此，我希望真正使我的设计可行，但我研究了各种方法（jquery、AJAX、lightbox），但我不确定使用什么来适合我的设计。链接位于底部，但这是基本问题：

对于投资组合中的每个项目，我都有主图像区域、一些副本和选择区域，其中有图像的简短标题以及您可以选择的更多内容（表示为数字），我想要做的是能够更改图像并在选择区域中更改短标题和数字，以及当您将鼠标悬停在不同数字上时显示它们，而无需重新加载页面。 （我很抱歉，我让这个听起来过于复杂，当您查看实际页面时，它会更加电报。）理想情况下，我想找到一种方法，可以在更改时允许图像进行微妙/短暂的淡出和淡入，而不是一个尖锐、粗鲁的开关，但这是锦上添花。

如果有人有任何想法可以指出我正确的方向，我将不胜感激！非常感谢您的帮助！

http://personal.justgooddesign.net/draft/work.html

Answer 1

嗯，这可以使用 Ajax 来完成。事实上，使用 Jquery 相当容易。
我建议您将不同的“部分”分解为页面。

我的意思是，例如，您将有一个 print.html 页面，仅包含打印页面的标记，对于网页和运动页面也相同。 （只有标记 =“主图像区域、一些副本和具有图像短标题的选择区域”，没有 、或 标记，因为我们实际上正在为您的页面创建“段”，

除了您当前的 div id content3 和 content4 之外，主页容器的标记几乎相同。空的（因为这是我们插入页面的位置。事实上，您甚至可以将这 2 个 div 外包到您的页面段，并将它们替换为

（更好，因为你可以更好地控制你的段中的项目的放置）。

可以查找或询问。

从这里开始，我假设你对jquery有一定的了解，所以如果你不明白什么，你 有每个链接（web/print/motion）有一个“load_segment”类和一个 web/print/motion id，为了方便起见，我将 id 命名为与上面讨论的页面段相同的名称（没有 .html 扩展名）。当然）使一些工作自动化。

因此，完成此操作后，包含 jquery 脚本并执行类似以下操作

<script>
   $(function(){ // shorthand document.ready, ensures dom is loaded before starting

       $('.load_segment').click(function(){  // binds a click event handler to your links

           var page = $(this).attr("id") + '.html'  

           /* 
              here is why we named our id the same as our page segments, we auto generate 
              filenames, and thus only need to write this code once for all 3 links. you could 
              even add more later and as long as you have the corresponding html file segment 
              it will still work all the same 
           */

           $.get(page,function(segment){  
          // perform ajax request, fetch page, and then execute function 

               $("#dynamic").html(segment); 
              // the segment is inserted in the dynamic div created above.

           }); //end ajax request

        }); // end .load_segment click event

   }) // end of jquery document.ready
</script>

请注意，对于每个部分中的编号链接，您还可以在段中创建嵌入式 ajax 获取器，例如上面的内容（无需在每个部分中再次包含 jquery段）并为每个页面创建...以及“子段”，但从长远来看，如果页面要增长，这可能会变得有点复杂。