Question

好的我试着做一些不同的事情，但它们都非常简单。我只能找到一些答案，这些答案有点像我想要做的事情，当我混合搭配不同的答案时，它们不能很好地协同工作。我认为最好特别提问。

enter image description here

底部的隐藏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 glasses Link的菜单链接 - 将div cg1加载到div-pic-1

和div cgcontent into center-content

和div cg2进入div-pic-2

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

Answer 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

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

1 个答案: