Javascript 单击链接将其显示在同一页面上的不同 Div 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8152976/
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
Clicking a link display it in Different Div on Same Page
提问by daddycardona
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
我想知道是否有办法能够点击导航 Div 标签上的链接并将其显示在内容 Div 上，就像我有一样
<div id="nav">
<a href="infoto (div id="content")">a link </a></div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
从下面的评论中 - OP 声明如下：
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
我正在尝试重做一个网站，但我的想象力变得越来越好。如果我有三个链接，比如家，关于作者，关于我们的使命。我希望能够点击作者并在 main_content div 标签中显示 html 文件 aboutauthor.html
回答by
Alt 1: Use jquery tabs:See demo and code here: http://jqueryui.com/demos/tabs/
替代 1：使用 jquery 选项卡：请参阅此处的演示和代码：http: //jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
替代 2：在同一 html 文件中隐藏/显示 div：
HTML:
HTML：
<div id="nav">
<a href="#content1">Show content 1</a>
<a href="#content2">Show content 2</a>
<a href="#content3">Show content 3</a>
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
jQuery：
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
演示：http: //jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
替代 3：按需从服务器加载：
To load html into your main div you should use: http://api.jquery.com/load/Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
要将 html 加载到您的主 div 中，您应该使用：http: //api.jquery.com/load/按照该站点上的示例。请注意，您正在加载的 html 端必须与您托管新页面的域位于同一域中。
Html
html
<a href="http:www.test.com/test1.html">Show content 1</a>
<a href="http:www.test.com/test2.html">Show content 2</a>
jQuery
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
回答by David Houde
Using jQuery, you could do something like this.
使用 jQuery，你可以做这样的事情。
This will open the site <a href="example.html">and put it inside of the <div id="content">when you click it, and then disable changing the whole site.
当您单击它时，这将打开该站点<a href="example.html">并将其放入<div id="content">其中，然后禁用更改整个站点。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
<a href="somepage.html">Some page</a>
<a href="someotherpage.html">Some other page</a>
<a href="smypage.html">My page</a>
</div>
<div id="content">
show the stuff
</div>
回答by CodeCaster
Something like this:
像这样的东西：
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
<a href="path-to-non-js-browsers-and-search-engines.html" onClick="setContent('content','foo');">a link </a>
回答by Gordnfreeman
to show a hidden div (i think this is what you wanted)
显示一个隐藏的 div（我认为这就是你想要的）
the javascript (using jQuery)
javascript（使用jQuery）
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
html
<a href="javascript: void(0)" id="showdiv">Show the Div</a>
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here
你可以在这里看到它的实际效果
