javascript - 显示和隐藏 div 以更改页面内容

Question

我试图使用查询更改我的网页内容。我有如下代码，像这样:

<div class="container" id="index">
  <div class="table-responsive container selecoes" >
      <table class="table">
          <tbody id="selecaoList">
            <td>
            <a href="#selecoes" data-identity="1">Brasil</a>
            </td>
          </tbody>
     </table>
</div>


<div class="container" id="selecoes">
   <p>show something</p>
<div>

...
<script>
 $(document).ready(function(){

    $( "#selecoes" ).hide();
    $("#selecoes a").click(function() {
        $( "#index" ).hide();
        $("#selecoes").show();
    });

  });
</script>

当我打开页面时，第一个 div已显示并且很好，但是当我单击巴西时，不要替换(隐藏)<div id ="index">至 <div id="selecoes">显示元素 <p> .

所以我想隐藏第一个 div 并显示第二个 div 来代替第一个。

Answer 1

第 1 步:在click 函数上设置右选择器

第二步:关闭#index

的 div标签

这是工作代码:

<div class="container" id="index">
  <div class="table-responsive container selecoes" >
      <table class="table">
          <tbody id="selecaoList">
            <td>
            <a href="#selecoes" data-identity="1">Brasil</a>
            </td>
          </tbody>
     </table>
  </div>
</div>


<div class="container" id="selecoes">
   <p>show something</p>
<div>

<script>
$(document).ready(function(){

    $( "#selecoes" ).hide();
    $("#selecaoList a").click(function() {
        $( "#index" ).hide();
        $("#selecoes").show();
    });

  });
</script>