javascript 非常简单的链接单击更改单个页面上的 Div 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29759812/
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
Very Simple with Link Click Change the Content of a Div on a Single Page
提问by riZZi
I am a very beginner in coding and I have been trying to scour the Internet for different ways to do this and they seem to be all over the place. I have one simple page with an "About Me" link and a "Contact" link. I would like the default information to be the About Me information and then if you click Contact for the Content on the page to switch to my Contact info and then if you click About Me again for it to switch back.
我是编码的初学者，我一直试图在互联网上搜索不同的方法来做到这一点，它们似乎无处不在。我有一个带有“关于我”链接和“联系”链接的简单页面。我希望默认信息是关于我的信息，然后如果您单击页面上内容的联系以切换到我的联系信息，然后如果您再次单击关于我以切换回来。
Is it possible to do this with just HTML or do I need to use jQuery? I am trying to set up a proper Div structure and figure out the necessary jQuery functions, but I am having a hell of a time with what seems to be an incredibly simple problem.
是否可以仅使用 HTML 来执行此操作，还是需要使用 jQuery？我正在尝试建立一个适当的 Div 结构并找出必要的 jQuery 函数，但我遇到了一个似乎非常简单的问题。
I appreciate your help.
我感谢您的帮助。
Thanks!
谢谢！
update #1: here is what I am writing at the moment
更新 #1：这是我目前正在写的内容
<link rel="stylesheet" type="text/css" href="css.css">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
</head>
<header>
<img src="header.jpg" style="border:3px solid black; border-radius:10px">
<p>the only way to predict the future, is to create it...</p>
<div>
<ul>
<li><a href="#" class="aboutme">About Me</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
</div>
</header>
<body>
<div class="aboutme" id="about me" >
<p>This is about me</p>
</div>
<div class="contact" id="contact" style="display:none">
<p>This is my contact into </p>
</div>
</body>
</html>
I've tried using these different techniques but am having trouble understanding them
我曾尝试使用这些不同的技术，但无法理解它们
http://jsfiddle.net/mA8hj/Change content of div - jQueryHiding table data using <div style="display:none">http://jsbin.com/ivenik/2/edit?html,css,js,output
http://jsfiddle.net/mA8hj/更改 div 的内容 - jQuery使用 <div style="display:none"> http://jsbin.com/ivenik/2/edit?html,css,js隐藏表格数据，输出
回答by DannyIkard
I hate it when people just down-vote something without even trying to help. I'm assuming what you're doing is something like this...
我讨厌人们只是在不提供帮助的情况下对某事投反对票。我假设你在做什么是这样的......
<html>
<body>
<p>Page Title</p>
<div id="AboutMeHTML" style="visibility:hidden;">This is about me</div>
<div id="ContactHTML" style="visibility:hidden;">This is contact HTML</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td onclick="document.getElementById('AboutOrContactDiv').innerHTML=document.getElementById('AboutMeHTML').innerHTML;">About Me</td>
<td onclick="document.getElementById('AboutOrContactDiv').innerHTML=document.getElementById('ContactHTML').innerHTML;">Contact Info</td>
</tr>
</table>
<div id="AboutOrContactDiv"></div>
</body>
</html>But the down-voter is correct though, the question is a bit vague. There are in fact several ways of accomplishing this. The method I listed above is with javascript, but may not be ideal in certain situations. Another javascript method would be to toggle the visiblity of the AboutMeHTML div and the ContactHTML div although I often avoid that because it makes the page jump around at times. You could also use an iframe and seperate pages for AboutMe and Contact and just change the source, or instead of specifying the AboutMe and Contact innerHTML in the body of the document in a hidden div you could specify it in javascript as a variable. The latter might perform better, but the way I did it makes it easier to edit using Dreamweaver or the like.
但是反对者是正确的，这个问题有点含糊。事实上，有几种方法可以实现这一点。我上面列出的方法是使用 javascript，但在某些情况下可能并不理想。另一种javascript方法是切换AboutMeHTML div和ContactHTML div的可见性，尽管我经常避免这样做，因为它有时会使页面跳转。您还可以使用 iframe 并为 AboutMe 和 Contact 使用单独的页面，只需更改源，或者不是在隐藏 div 的文档正文中指定 AboutMe 和 Contact innerHTML，您可以在 javascript 中将其指定为变量。后者可能会表现得更好，但我这样做的方式使得使用 Dreamweaver 或类似软件进行编辑变得更加容易。
回答by Mia Sno
If you only have 2 links the simplest thing you can do is do 2 pages, an about page and contact page and the links click through to the separate pages. If you want it all on the one page, you will need jquery/javascript. Surround the 'about page' content in its own div and the 'contact' content in its own div and give those divs their own class or id. Then use jquery on click event to show/hide each section depending on link clicked. You should be able to find show/hide div jquery samples all over this site.
如果您只有 2 个链接，那么您可以做的最简单的事情就是做 2 个页面，一个关于页面和联系页面，然后点击链接到单独的页面。如果您希望在一页上完成所有操作，则需要 jquery/javascript。将“关于页面”内容包围在其自己的 div 中，将“联系人”内容包围在其自己的 div 中，并为这些 div 提供自己的类或 ID。然后在单击事件上使用 jquery 根据单击的链接显示/隐藏每个部分。您应该能够在整个站点上找到显示/隐藏 div jquery 示例。
回答by riZZi
Ok, I think I found something to work, actually it does work, but I still feel it's overly complicated. Here is what the code looks like.
好吧，我想我找到了一些有用的东西，实际上它确实有效，但我仍然觉得它过于复杂。下面是代码的样子。
<link rel="stylesheet" type="text/css" href="css.css">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script>$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#aboutme").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").fadeOut(function(){
$(this).next().fadeIn();
});
else {
$(".divs div:visible").fadeOut(function(){
$(".divs div:first").fadeIn();
});
}
return false;
});
$("#contact").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").fadeOut(function(){
$(this).prev().fadeIn();
});
else {
$(".divs div:visible").fadeOut(function(){
$(".divs div:last").fadeIn();
});
}
return false;
});
});
</script>
</head>
<header>
<img src="header.jpg" style="border:3px solid black; border-radius:10px">
<p>the only way to predict the future, is to create it...</p>
<div>
<ul>
<li><a href="#" id="aboutme">About Me</a></li>
<li><a href="#" id="contact">Contact</a></li>
</ul>
</div>
</header>
<body>
<div class="divs">
<div class="aboutme">1</div>
<div class="contact">2</div>
</div>
</html>
