javascript - 在 JavaScript 中用同一帧中的另一个对象替换一个对象？

Question

我在主页 (index.html) 上创建了一个带有选项的列表。我遇到的问题是当我运行代码时；如果用户点击“list_row1”然后“table1”出现(一切正常)，此后如果用户点击“list_row2”然后“table2”显示在 table1 下方 100-200px(一切都不是很好)。我希望 table1 简单地被 table2 替换，反之亦然，在同一位置被用户点击的列表(list_row1 和 list_row2)选项替换。

例如，我希望将红色圆圈替换为黑色圆圈，反之亦然。

这是我的 index.html，下面是 JavaScript 代码:

$(function(){
  $('#list_row1').on('click',function(){
    $('#table2').hide();
    $('#table1').toggle();
  });

  $('#list_row2').on('click',function(){
    $('#table1').hide();
    $('#table2').toggle();
  });                     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class="list-group">
    <div id = "list_row1">
      <li class="list-group-item">Exhaust Temperature</li>
    </div>
    <div id = "list_row2">
      <li class="list-group-item">Cylinder Pressure</li>
    </div>
  </ul>
</div>

<div id = "table1"></div>
<div id = "table1"></div>

Answer 1

请检查您的代码。你有两个具有相同 id 的 div

<div id = "table1"></div>
<div id = "table1"></div>