如何在顶部选择信息框？

Question

我试图做出与附图所示相同的事情：

  

我一直在网上寻找答案，但我似乎无法找到解决方案。我只是制作一个<div>并在其上添加另一个<div>吗？

Answer 1

我为你做了一个非常简单的例子

＆＃13;

＆＃13;

$("#tab1").click(function() {
  $("#section2").hide();
  $("#section1").show();
});

$("#tab2").click(function() {
  $("#section1").hide();
  $("#section2").show();
});

＆＃13;

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  cursor: pointer;
}

#section2 {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <nav>
    <ul>
      <li id="tab1">Tab 1</li>
      <li id="tab2">Tab 2</li>
    </ul>
  </nav>
  <section id="section1">
    Content 1
  </section>
  <section id="section2">
    Content 2
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;