jquery onclick加载div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15599089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery onclick load div
提问by Jeff
May I know is it possible to do this in jquery?
我可以知道可以在 jquery 中做到这一点吗？
I have a category link:
我有一个类别链接：
<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Moulds</a></li>
<li><a href="#">Videos</a></li>
</ul>
and the content are seperated by div
并且内容由div分隔
<div id="tools">This is the tools content</div>
<div id="moulds">This is the moulds content</div>
<div id="videos">This is the videos content</div>
by default it will show tools content and other twos (moulds and videos) div are hidden. They only show when the menu is click. On top of that is it possible to put loading picture when loading the other div or something like fade in fade out animation?
默认情况下，它将显示工具内容，其他两个（模具和视频）div 是隐藏的。它们仅在单击菜单时显示。最重要的是，是否可以在加载其他 div 或淡入淡出动画时放置加载图片？
Can this be done? i search over stackoverflow but none of them meet what i want..
这能做到吗？我在stackoverflow上搜索，但没有一个满足我想要的..
thank you in advance!
先感谢您！
回答by Praveen Kumar Purushothaman
Why don't you use a tab / something similar. Anyways, you can do this way, but before, change the HTML this way:
为什么不使用选项卡/类似的东西。无论如何，您可以这样做，但在此之前，请以这种方式更改 HTML：
<ul>
<li><a href="#tools">Tools</a></li>
<li><a href="#moulds">Moulds</a></li>
<li><a href="#videos">Videos</a></li>
</ul>
And in the JavaScript give this way:
在 JavaScript 中给出这种方式：
$("ul li a").click(function(){
theDiv = $(this).attr("href");
$(theDiv).show();
});
If you want only one divto be shown, you can do this way:
如果你只想div显示一个，你可以这样做：
$("ul li a").click(function(){
$("div").hide();
theDiv = $(this).attr("href");
$(theDiv).show();
});
My suggestion would be, using a common class for both the <div>s and <a>s.
我的建议是，对<div>s 和<a>s使用一个公共类。
Finally, you might arrive to this:
最后，你可能会到达这个：
<ul>
<li><a class="link" href="#tools">Tools</a></li>
<li><a class="link" href="#moulds">Moulds</a></li>
<li><a class="link" href="#videos">Videos</a></li>
</ul>
<div class="tab" id="tools">This is the tools content</div>
<div class="tab" id="moulds">This is the moulds content</div>
<div class="tab" id="videos">This is the videos content</div>
And then, the event handling would be:
然后，事件处理将是：
$(".link").click(function(){
$(".tab").hide();
theDiv = $(this).attr("href");
$(theDiv).show();
});
回答by roman
hy
嘿嘿
fadings are quite easy in jquery. here a sample
在 jquery 中褪色很容易。这里有一个样本
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>js test</h1>
<ul id="myMenu">
<li><a href="#" data-id="tools">Tools</a></li>
<li><a href="#" data-id="modules">Moulds</a></li>
<li><a href="#" data-id="videos">Videos</a></li>
</ul>
<div class="subcontent" id="tools" style="display:block">tools</div>
<div class="subcontent" id="modules">modules</div>
<div class="subcontent" id="videos">videos</div>
<script type="text/javascript">
$(document).ready(function()
{
$('#myMenu').on('click','a',function()
{
// fade out all open subcontents
$('.subcontent:visible').fadeOut();
// fade in new selected subcontent
$('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();
});
});
</script>
<style type="text/css">
div.subcontent { display:none; }
</style>
we register a event handler with $('#myMenu').on(..) witch listens on clicks on a link element (a) and fades out first all open (visible) divs. then it starts with fading in. in this case the fade out and fade in methods starts at the same time. with a callback function you're able to call this 2 steps after each other.
我们使用 $('#myMenu').on(..) 注册一个事件处理程序，女巫监听链接元素 (a) 上的点击，并首先淡出所有打开的（可见）div。然后它从淡入开始。在这种情况下，淡出和淡入方法同时开始。使用回调函数，您可以依次调用这 2 个步骤。
