0

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

在此处输入图像描述

底部的隐藏 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。Cyber​​glasses div 仅在单击网络眼镜链接时加载。

4

1 回答 1

0 
<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

于 2013-10-28T21:01:30.443 回答