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代替第一个div。

Answer 1

点击事件的选择器错误。必须是：

$("#selecaoList a").click(function()  ...

Answer 2

第1步：在click功能

上设置右选择器

第2步：关闭div的{{1}}标记

这是工作代码：

#index

Answer 3

点击功能在错误的选择器上。使用此代码：

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

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

3 个答案: