javascript - 隐藏Div直到我单击文本/按钮，出现，然后当我单击另一个时，它消失并且另一个可见。

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        4年前关闭。



我怎么做？这是我到目前为止的内容：

<!DOCTYPE HTML>

<html>

<style>
  @charset 'UTF-8';
  @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");
  body {
    background: #fff;
  }
  body,
  input,
  textarea,
  select {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 19pt;
    font-weight: 300;
    line-height: 1.75em;
    color: #888;
  }
}
header {
  margin: 0 0 2em 0;
}
header > p {
  margin: 1em 0 0 0;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: #E27689;
  border-bottom-color: rgba(255, 255, 255, 0);
}
.image.avatar48 img {
  width: 70px;
  height: 60px;
}
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 375px;
  height: 100%;
  color: #fff;
  background: #222629;
  box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1);
  text-align: right;
}
#logo {
  position: relative;
  margin: 1.75em 1.5em 1.5em 1.5em;
  min-height: 48px;
  cursor: default;
}
#logo h1 {
  position: relative;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  line-height: 1em;
}
#logo p {
  position: relative;
  display: block;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.25em;
  margin: 0.5em 0 0 0;
}
#logo .image {
  position: absolute;
  left: 0;
  top: 0;
}
#nav ul li a {
  display: block;
  padding: 0.5em 1.5em 0.5em 1.5em;
}
#main > section {
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;
}
.portfolio {
  position: relative top: 20%;
  left: 50%;
  visibility: hidden
}
</style>

<head>
  <title>Ryan H</title>
</head>

<body>

  <div id="header" class="skel-layers-fixed">

    <div class="top">

      <!-- Logo -->
      <div id="logo">
        <span class="image avatar48"><img src="http://i.imgur.com/r3HkBkB.jpg" alt="" /></span>
        <h1 id="title">Ryan Ho</h1>
        <p>13 years old</p>
      </div>

      <nav id="nav">

        <ul>
          <li><a href="#top" id="top-link"><span class="icon fa-home">Intro</span></a>
          </li>

          <li><a href="#about" id="about-link"><span class="icon fa-user">About Me</span></a>
          </li>

          <li><a href="#portfolio" id="portfolio-link"><span class="icon fa-user">Stuff</span></a>
          </li>

        </ul>
      </nav>

    </div>

  </div>

  <!-- Main -->
  <div id="main">

    <!-- Intro -->
    <section id="top" class="one dark cover">
      <div class="container">

        <header>
          <h2 class="alt">I am Ryan H.</h2>
        </header>

      </div>
    </section>
    <!-- About Me -->
    <section id="about" class="two">
      <div class="container">

        <header>
          <h2>About Me</h2>
        </header>

        <p>Site In Progress</p>

      </div>
    </section>

    <section id="portfolio" class="three">
      <div class="container">

        <header>
          <h2>Stuff</h2>
        </header>

        <p>This is where I would put my stuff, if I had any.</p>
      </div>
    </section>
  </div>
</body>

</html>

我必须使用jQuery还是Javascript？如果是这样，那是什么？我被困住了。

最佳答案

使用jQuery ...

http://jsfiddle.net/v6kxc2uk/

<div id="1" style="display: none;">some text</div>
<div id="2" >some more text</div>
<button linkto="1">1</button>
<button linkto="2">2</button>

$('button').on('click', function(){

    $('div').hide();
    $('div#'+$(this).attr('linkTo')).show();

});