Question

我提前道歉，如果我在这里不知情的话就下台了。我是一名想要学习的设计师。

所以我希望实际上让我的设计可行，但我已经看过各种方法（jquery，AJAX，灯箱），但我不确定使用什么来适应我的设计。链接位于底部，但这是基本问题：

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

如果有人有任何关于在哪里指出我正确方向的想法，我将非常感激！非常感谢你的帮助！

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

Answer 1

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

我的意思是，例如，您将拥有一个print.html页面，其中仅包含打印页面的标记，网页相同，动态页面也相同。（只有标记=“主图像区域，某些副本和图像标题较短的选择区域”，没有<html>，<head>或<body>标记，因为我们是事实上，为您的网页创建“细分”。

主页面容器的标记几乎是相同的，除了你当前的id为content3和content4的div是空的（因为那是我们插入页面的地方。实际上你甚至可以将这两个div外包给你的页面段和用<div id='dynamic'></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）并为每个段创建... well“subsegments”页面，但如果页面要增长，那么从长远来看这可能会有点复杂。

动态加载＆amp;控制多个内容区域

1 个答案: