Question

我是编码的初学者，我一直试图通过不同的方式搜索互联网，他们似乎到处都是。我有一个简单的页面，其中包含“关于我”链接和“联系”链接。我希望默认信息是关于我的信息，然后如果您单击页面上的内容联系人切换到我的联系信息，然后再次单击关于我以切换回来。

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

Answer 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等编辑更容易。

Answer 2

如果您只有2个链接，您可以做的最简单的事情是做2页，关于页面和联系页面，链接点击进入单独的页面。如果你想在一个页面上全部，你需要jquery / javascript。围绕其自己的div中的“about page”内容和其自己的div中的“contact”内容，并为这些div提供他们自己的类或id。然后在点击事件上使用jquery，根据点击的链接显示/隐藏每个部分。你应该能够在这个网站上找到show / hide div jquery样本。

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

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

3 个答案: