非常简单的链接单击更改单个页面上的 Div 的内容答案

【问题标题】：Very Simple with Link Click Change the Content of a Div on a Single Page非常简单的链接单击更改单个页面上的 Div 的内容
【发布时间】：2015-04-20 22:51:14
【问题描述】：

我是编码的初学者，我一直在尝试在互联网上搜索不同的方法来做到这一点，它们似乎无处不在。我有一个带有“关于我”链接和“联系”链接的简单页面。我希望默认信息是关于我的信息，然后如果您单击页面上的内容的联系人以切换到我的联系信息，然后如果您再次单击关于我以切换回来。

是否可以只使用 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

【问题讨论】：

显示一些代码并解释您到底遇到了什么问题。目前您的问题还不清楚。
通过简单的超链接点击更改 iframe 的内容是否容易？

标签： javascript jquery html css

【解决方案1】：

我讨厌人们只是对某件事投了反对票，甚至没有试图提供帮助。我假设你正在做的事情是这样的......

<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 或类似软件更容易进行编辑。

【讨论】：

谢谢，这是我正在寻找的示例，一种令人难以置信的简单而优雅的内容切换方式

【解决方案2】：

如果你只有 2 个链接，你可以做的最简单的事情是做 2 个页面，一个关于页面和联系页面，然后链接点击到单独的页面。如果您希望将所有内容都放在一个页面上，则需要 jquery/javascript。将“关于页面”内容包围在自己的 div 中，将“联系人”内容包围在自己的 div 中，并为这些 div 赋予自己的类或 id。然后在单击事件上使用 jquery 根据单击的链接显示/隐藏每个部分。您应该能够在整个站点上找到显示/隐藏 div jquery 示例。

【讨论】：

你刚才说的我都知道。只使用两个单独的页面非常容易，但是，我正在尝试挑战自己，为更难的项目学习更多知识。我一直在这个网站上寻找简单的 jquery 隐藏/显示，但它们似乎并没有我想要的那么简单。我会继续寻找。谢谢

【解决方案3】：

好的，我想我找到了一些可行的方法，实际上它确实有效，但我仍然觉得它过于复杂。这是代码的样子。

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

【讨论】：