javascript - 仅在单击时将内容加载到 div 中

标签 javascript jquery css html onclick

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

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- loads div cg1 into div-pic-1

和 div cgcontent 到 center-content

和div cg2 到div-pic-2

同时。但是在页面加载时加载的唯一 div 是演示 div 和菜单 div,而不是 cyberglasses div。 Cyber​​glasses div 仅在点击 cyber glasses 链接时加载。

最佳答案

<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

关于javascript - 仅在单击时将内容加载到 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19644575/

相关文章:

javascript - 连接多方中间获取文件请求未定义

使用 foreach 函数时出现 javascript 异常

html - 悬停整个 div 行显示 :table properties

Javascript 添加变量两次

javascript - 动画不会在每次点击 jquery 时触发

jquery - 如何在单个 html 页面中添加两个相同的 adobe edge 动画?

jquery - 如何在单击链接时从左到右为 div 设置动画?

html - 如何让 div 垂直填充表格单元格?

jquery - 向右滚动时背景图像或颜色中断

javascript - 不要在页面刷新时启动tinymce