仅在点击时将内容加载到div中

好吧我试着做一些不同的事情,但它们都非常简单。 我只能找到一些答案,这些答案在某种程度上可以解决我想要做的事情,当我混合搭配不同的答案时,它们并不能很好地协同工作。 我认为最好特别问一下。

在此处输入图像描述

底部隐藏的div填充了图像,因此我只希望在单击链接时加载它们,而不是在加载页面时加载。 每个隐藏的div将有三个自己的div,目标是三个顶部div,所以当你点击该隐藏div的链接时,隐藏div中的所有三个div加载到三个顶部div中。 我很确定我知道如何让一个链接触发不同的事件,所以除非你知道一个更简单的方法,否则你不必帮助我。 以下是我需要帮助的主要内容:

  • 仅在单击而非页面加载时加载div内容
  • 定位div以将其他div内容加载到
  • 当点击链接打开一个新的隐藏div时,显示的另一个隐藏的div消失了
  • 因为这是一个技术网站,在切换/加载新div时进行某种技术转换会很不错。 如果没有别的东西可以使用淡入淡出,但你不必帮助我使用这个部分,就好像你碰巧知道一个代码或网页具有不同的过渡效果来加载内容会很好。

我还没有任何预先编写的代码与你建议的任何内容冲突,所以你可以提出任何建议。 你不必把所有内容写出来,我可以继续写下一个例子。 也许。

谢谢,我知道有单独的个人答案,但我再次尝试让他们一起工作,或者他们将做我需要的一部分而不是另一部分。 我想如果我只是问,有人可以在5分钟内为我提供代码。 谢谢。

编辑:生病添加代码,但我认为它不会有多大帮助。

 
Empty space to load stuff into
Empty space to load stuff into
Empty space to load stuff into
(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)
picture 1 of cyber glasses to load into id div-pic-1
description of cyber glasses to load into id center-content
picture 2 of cyber glasses to load into id div-pic-2

顶部名为-Cyber​​ glasses Link的菜单链接将div cg1加载到div-pic-1中

并将div cgcontent转换为center-content

和div cg2成div-pic-2

一切都在同一时间。 但是加载页面加载的唯一div是表示div和菜单div而不是cyberglasses div。 Cyber​​glasses div仅在点击网络眼镜链接时加载。

       

演示: https : //oteck.co.uk/sample/load.html