链接非常简单单击更改单个页面上Div的内容 [英] Very Simple with Link Click Change the Content of a Div on a Single Page
问题描述
我是编码方面的初学者，我一直试图在互联网上搜索不同的方式来做到这一点，而且他们看起来都是这个地方。我有一个带有关于我链接和联系链接的简单页面。我希望默认信息是关于我的信息，然后如果您单击页面上的内容联系人以切换到我的联系人信息，然后再单击关于我以再次切换回。
有可能只用HTML来做到这一点，还是我需要使用jQuery？我试图建立一个合适的Div结构并找出必要的jQuery函数，但是我看起来像是一个令人难以置信的简单问题。
感谢您的帮助。
谢谢！
更新＃1：这是我写的当下
< link rel =stylesheettype =text / csshref =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.jpgstyle =border：3px solid black; border-radius：10px>
< p>预测未来的唯一方法是创建它...< / p>
< div>
< ul>
< li>< a href =＃class =aboutme>关于我< / a>< / li>
< li>< a href =＃class =contact>联络人< / a>< / li>
< / ul>
< / div>
< / header>
< body>
< div class =aboutmeid =关于我>
< p>这是关于我的< / p>
< / div>
< div class =contactid =contactstyle =display：none>
< p>这是我与< / p>
< / div>
< / body>
< / html>
我尝试过使用这些不同的技术，但无法理解它们。 b
http://jsfiddle.net/mA8hj/
< a href =https://stackoverflow.com/questions/7139208/change-content-of-div-jquery>更改div的内容 - jQuery
使用< div style ="隐藏表格数据：display：none">
http://jsbin.com/ivenik/2/edit?html,css， js，输出
我讨厌它，人们只是在没有帮助的情况下投下一些东西。我假设你正在做的是这样的...
< html>< body>< p> Page标题< / p>< div id =AboutHTMLstyle =visibility：hidden;>这是关于我的< / div>< div id =ContactHTML>是联系人HTML< / div>< table width =100％border =0cellspacing =0cellpadding =0> < TR> < td onclick =document.getElementById（'AboutOrContactDiv'）。innerHTML = document.getElementById（'AboutMeHTML'）。innerHTML;>关于我< / td> < td onclick =document.getElementById（'AboutOrContactDiv'）。innerHTML = document.getElementById（'ContactHTML'）。innerHTML;>联系信息< / td> < / table>< div id =AboutOrContactDiv>< / div>< / body>< / html>
但是这个向下选举人是正确的，但问题有点含糊。实际上有几种方法来完成这一点。我上面列出的方法是用javascript，但在某些情况下可能不理想。另一种JavaScript方法是切换AboutMeHTML div和ContactHTML div的可见性，尽管我经常避免这种情况，因为它会使页面有时跳跃。您也可以为AboutMe和Contact使用iframe和独立页面，只需更改源代码，或者不要在隐藏的div中指定文档正文中的AboutMe和Contact innerHTML，您可以在JavaScript中将其指定为变量。后者可能表现更好，但是我做的方式使得使用Dreamweaver等进行编辑变得更加容易。
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.
I appreciate your help.
Thanks!
update #1: here is what I am writing at the moment
<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 - jQuery Hiding table data using <div style="display:none"> http://jsbin.com/ivenik/2/edit?html,css,js,output
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.
这篇关于链接非常简单单击更改单个页面上Div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
