gpt4 book ai didi

javascript - 非常简单,点击链接更改单个页面上的 Div 内容

转载 作者:搜寻专家 更新时间:2023-10-31 23:26:48 24 4
gpt4 key购买 nike

我是编码方面的初学者,我一直在尝试在 Internet 上搜索不同的方法来执行此操作,而且它们似乎无处不在。我有一个带有“关于我”链接和“联系方式”链接的简单页面。我希望默认信息是关于我的信息,然后如果您单击页面上的内容的联系方式切换到我的联系信息,然后如果您再次单击关于我则切换回来。

是否可以仅使用 HTML 来完成此操作,还是我需要使用 jQuery?我正在尝试建立一个适当的 Div 结构并找出必要的 jQuery 函数,但我遇到了一个看似非常简单的问题。

感谢您的帮助。

谢谢!

更新 #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>

我尝试过使用这些不同的技术,但在理解它们时遇到了困难

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

最佳答案

我假设你正在做的是这样的......

<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>

实际上有几种方法可以实现这一点。我上面列出的方法是使用 javascript,但在某些情况下可能并不理想。另一种 javascript 方法是切换 AboutMeHTML div 和 ContactHTML div 的可见性,尽管我经常避免这样做,因为它有时会使页面跳来跳去。您还可以为 AboutMe 和 Contact 使用 iframe 和单独的页面,只需更改源,或者不是在隐藏的 div 文档正文中指定 AboutMe 和 Contact innerHTML,您可以在 javascript 中将其指定为变量。后者可能表现更好,但我这样做的方式使使用 Dreamweaver 或类似软件进行编辑变得更容易。

关于javascript - 非常简单,点击链接更改单个页面上的 Div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29759812/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com