仅在单击时将内容加载到 div 中答案

【问题标题】：Load content into div only on click with additional仅在单击时将内容加载到 div 中
【发布时间】：2013-10-28 20:33:22
【问题描述】：

好的，我尝试做一些不同的事情，但它们都很简单。我只能找到在某种程度上给出我想要做的事情的答案，当我混合和匹配不同的答案时，它们不能很好地协同工作。我觉得最好具体问一下。

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

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

我还没有任何预先编写的代码会与您的建议发生冲突，因此您可以提出任何建议。你不必把所有的东西都写出来，我可以举个例子。也许吧。

谢谢你，我知道有单独的个人答案，但我再次尝试让他们一起工作时遇到了麻烦，否则他们会做我需要的一部分，而不是另一部分。我想如果我只是问，有人可以在 5 分钟内为我编写代码。谢谢。

编辑：我会添加代码，但我认为它不会有太大帮助。

<div id="menu"> <a> -Cyber glasses Link- that opens cyberglasses div and loads it into presentation div </a></div>

<div id="presentation">
<div id="div-pic-1">Empty space to load stuff into</div>
<div id="center-content">Empty space to load stuff into</div>
<div id="div-pic-2">Empty space to load stuff into</div>
</div>


<div id="cyberglasses">(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)

<div id="cg1"> picture 1 of cyber glasses to load into id div-pic-1 </div>
<div id="cgcontent"> description of cyber glasses to load into id center-content</div>
<div id="cg2"> picture 2 of cyber glasses to load into id div-pic-2<div>

</div>

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

并将 div cgcontent 放入 center-content

和 div cg2 进入 div-pic-2

同时。但是在页面加载时加载的唯一 div 是演示 div 和 menu div，而不是cyberglasses div。 Cyberglasses div 仅在单击网络眼镜链接时加载。

【问题讨论】：

3 个 div，3 个顶级 div，隐藏的 div，......我完全迷失在你的问题中。请让您的图片清晰并粘贴一些代码。最大限度地缩短和简化您的问题，使其易于理解。（这里我们喜欢简单明了的问题）欢迎来到 SO
一点代码？？？在代码中展示你的进步

标签： javascript jquery css html onclick

【解决方案1】：

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
    <body>
        <div id="navigation">
            <a href="welcome.html" rel="#content">Welcome</a>
            <a href="frog.html" rel="#image">Frog</a>
            <a href="lamma.html" rel="#image">Lamma</a>
        </div>
        <div id="content"></div>
        <div id="image"></div>
        <script>
          $(function(){
            $('#navigation').on('click','a',function(e){
              e.preventDefault();
              $($(this).attr('rel')).load($(this).attr('href'));
            });
          });
        </script>
    </body>
</head>
</html>

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

【讨论】：