Jquery 动态加载和控制多个内容区域
如果我在这里表现得不够博学，我提前道歉。我是一个试图学习的设计师 所以我想让我的设计切实可行，但我看过jquery、AJAX和lightbox的各种方法，但我不确定使用什么来适合我的设计。链接位于底部，但基本问题是： 对于公文包中的每个项目，我都有主图像区域、一些副本和选择区域，其中包含图像的短标题以及更多您可以选择表示为数字的内容，我想做的是既能更改图像，又能在选择区域中更改短标题和数字，当你将鼠标悬停在不同的数字上时，也可以让它们显示出来，而无需重新加载页面。我很抱歉，我把这听起来太复杂了，当你查看实际页面时，它更像电报。理想情况下，我希望找到一种方法，允许图像在更改时进行细微/短暂的淡出和淡入，而不是进行尖锐、唐突的切换，但这是锦上添花 如果有人能给我指出正确的方向，我将不胜感激！非常感谢你的帮助Jquery 动态加载和控制多个内容区域,jquery,ajax,dynamically-generated,Jquery,Ajax,Dynamically Generated,如果我在这里表现得不够博学，我提前道歉。我是一个试图学习的设计师 所以我想让我的设计切实可行，但我看过jquery、AJAX和lightbox的各种方法，但我不确定使用什么来适合我的设计。链接位于底部，但基本问题是： 对于公文包中的每个项目，我都有主图像区域、一些副本和选择区域，其中包含图像的短标题以及更多您可以选择表示为数字的内容，我想做的是既能更改图像，又能在选择区域中更改短标题和数字，当你将鼠标悬停在不同的数字上时，也可以让它们显示出来，而无需重新加载页面。我很抱歉，我把这听起来太复杂了，
好的，这可以使用Ajax来完成。实际上，使用Jquery相当容易。 我建议你把不同的部分分成几页 我的意思是，例如，您将有一个print.html页面，其中只包含打印页面的标记，web页面的标记相同，运动页面的标记相同。只有标记=主图像区域、一些副本和选择区域，其中包含图像的短标题、否或标记，因为我们实际上是在为您的页面创建段 主页容器的标记几乎相同，只是id为content3和content4的当前div将为空，因为我们将在其中插入页面。事实上，您甚至可以将这两个div外包给您的页面段，并用更好的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>