将内容加载到div只有点击与额外 [英] Load content into div only on click with additional
问题描述
Ok我想做一些不同的事情，但他们都很简单。我只能找到答案，有些给我一个试图做什么，当我混合和匹配不同的答案，他们不能一起工作。我认为最好是具体问。
Ok Im trying to do a few different things but they are all pretty simple. I can only find answers that somewhat give a piece of what Im trying to do and when I mix and match different answers they don't work well together. I figured it would be better to ask specifically.
底部的隐藏div用图像填充，因此我只希望在链接被点击时加载，而不是在网页加载时加载。每个隐藏的div将有三个自己的目标三个顶部的div，所以当你单击该隐藏的div的所有三个div的所有三个div加载到三个顶部的div。我很确定我知道如何使一个链接触发不同的事件，所以你不必帮助我，除非你知道一个更简单的方法来做到这一点。以下是我需要帮助的主要内容：
The hidden divs on the bottom are filled with images so I only want them to load when a link is clicked and not when the page is loaded. Each hidden div will have three divs of its own that target the three top divs so when you click the link for that hidden div all three of the divs in that hidden div load into the three top divs. I'm pretty sure I know how to make one link trigger different events so you don't have to help me there unless you know a simpler way to do this. Here are the main things I need help with:
- 仅在点击而不是网页加载时加载div内容
- 定位div以将其他div内容加载到
- 当链接被点击打开一个新的隐藏div时，显示的其他隐藏div消失
- ，因为这是一个技术网站，在切换/加载新div时，有一些技术转换是很好的。如果没有什么其他的褪色可以工作，但你不必帮助我这个部分，只是如果你碰巧知道一个代码或网页有不同的过渡效果加载内容，这将是很好的。
- loading div content only on click and not page load
- targeting a div to load other div content into
- when link is clicked to open a new hidden div, the other hidden div that was showing goes away
- and because this is a tech website it would be nice to have some kind of tech-y transition when switching between/loading new divs. If nothing else a fade would work but you don't have to help me with this part, just if you happen to know a code or webpage with different transition effects for loading content that would be nice.
我真的没有任何预编写的代码，但会与你的建议相冲突，所以你可以建议任何东西。你不必写出一切，我可以抓住一个例子。也许。
I don't really have any pre written code yet that will conflict with whatever you suggest so you can suggest anything. You don't have to write everything out, I can catch on with an example. Maybe.
谢谢我知道有单独的个人答案，但是我又遇到麻烦，希望让他们一起工作，或者他们会做我需要的一部分，但不是另一个。我想如果我只是问一个人可以在5分钟内鞭打我的代码。谢谢。
Thank you I know there are separate individual answers but again I have had trouble trying to get them to work together or they will do part of what I need but not the other. I thought if I just asked instead someone could whip up a code for me in like 5 minutes. Thanks.
编辑：无法添加代码，但我不认为这会有帮助。
edit: Ill add code but I don't think it'll help much.
<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
The menu link at the top named -Cyber glasses Link- loads div cg1 into div-pic-1
和div cgcontent into center-content
and div cgcontent into center-content
和div cg2转换为div-pic-2
and div cg2 into div-pic-2
全部同时。但是加载页面加载的唯一的div是演示文稿div和菜单div不是cyberglasses div。
all at the same time. But the only div that loads on page load is the presentation div and menu div not the cyberglasses div. Cyberglasses div only loads on click of the cyber glasses link.
推荐答案
<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只有点击与额外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
