如果我在这里表现得不够了解，我会提前道歉。我是一名尝试学习的设计师。
所以我希望真正使我的设计可行，但我已经研究了各种方法（jquery、AJAX、lightbox），但我不确定用什么来适应我的设计。链接在底部，但这是基本问题：
对于投资组合中的每个项目，我都有主图像区域、一些副本和具有图像短标题的选择区域，您可以选择更多（表示为数字），我想要做的是两者都能够更改图像并在选择区域中更改短标题和数字，并在您将鼠标悬停在不同数字上时显示它们，而无需重新加载页面。（我很抱歉我让这听起来过于复杂，当您查看实际页面时，它更加电报。）理想情况下，我想找到一种方法，当您更改时允许图像的微妙/短暂淡入和淡入，而不是一个尖锐、粗暴的开关，但这是锦上添花。
如果有人有任何想法将我指向正确的方向，我将不胜感激！非常感谢你的帮助！
嗯，这可以使用 Ajax 来完成。事实上，使用 Jquery 相当容易。我建议您将不同的“部分”分解为页面。
我的意思是，例如，您将有一个 print.html 页面，其中仅包含打印页面的标记，网页相同，运动页面也相同。（只有标记=“主图像区域、一些副本和具有图像短标题的选择区域”、no<html>或<head>标签，<body>因为我们实际上是在为您的页面创建“段”。
主页面容器的标记几乎相同，只是您当前的 id 为 content3 和 content4 的 div 为空（因为我们将在此处插入您的页面。事实上，您甚至可以将这 2 个 div 外包给您的页面段并将它们替换为a <div id='dynamic'></div>（更好，因为您可以更好地控制段中项目的放置）。
从这里开始，我假设您对 jquery 有一定的了解，所以如果您不了解某些内容，可以查找或询问。
您可以让每个链接（网络/打印/运动）都有一个“load_segment”类和一个网络/打印/运动的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）并为每个页面创建......以及“子细分”，但是如果页面要增长，从长远来看，这可能会变得有点复杂。