好的,我正在尝试做一些不同的事情,但它们都很简单。我只能找到在某种程度上给出我正在尝试做的事情的答案,当我混合和匹配不同的答案时,它们不能很好地协同工作。我想具体问一下会更好。
底部隐藏的 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。 Cyberglasses 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>
关于javascript - 仅在单击时将内容加载到 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19644575/