Question

我在主页上创建了一个包含to选项的列表（index.html）。我遇到的问题是，当我运行代码时;如果用户点击“list_row1”然后“table1”显示（一切都很好），之后如果用户点击“list_row2”，那么“table2”显示在table1下面100-200px（一切都不能正常工作）。我希望table1简单地被table2替换，反之亦然，在人们点击的list（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>

Answer 2

两个表的ID都相同。这应该是你的代码： -

<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">table1</div>
<div id = "table2">table2</div>
<script>
  $(function(){
    $('#list_row1').on('click',function(){
      $('#table2').hide();
      $('#table1').toggle();
    });

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

Answer 3

嗨，这是一个错误，你的桌子都有相同的id'table1'。还有一个小建议隐藏了负载本身的表格div。我发布下面的新JavaScript代码看看。

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

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

Answer 4

以下示例说明如何在改进标记的同时切换两个“表格”div：http://jsfiddle.net/8fr0484L/3/

在<a>列表项中使用<li>锚标记，而不是尝试使用div。这将允许您使用锚标记的默认可点击行为。

<ul class="list-group">
    <li class="list-group-item"><a href='#' id='list_row1'>Exhaust Temperature</a></li>
    <li class="list-group-item"><a href='#' id='list_row2'>Cylinder Pressure</a></li>
</ul>

在代码中，可能值得隐藏“table”div在开头（在页面加载时），假设您当时不知道用户想要查看的内容。

        // hide the tables by default when page loads
        $('#table1').hide();
        $('#table2').hide();

        $('#list_row1').on('click',function(event){
            event.preventDefault(); // halt the anchor tag's default behaviour
            $('#table2').hide();
            $('#table1').show();
        });

        $('#list_row2').on('click',function(event){
            event.preventDefault(); // halt the anchor tag's default behaviour
            $('#table1').hide();
            $('#table2').show();
        });

Answer 5

<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">abc</div>
<div id = "table2">pqr</div>

<script>
$(function(){
    $('#list_row1').on('click',function(){
        $('#table2').css({
            visibility : "hidden"
        }); 
        $('#table1').css({
            visibility : "visible"
        });
    });

    $('#list_row2').on('click',function(){
         $('#table1').css({
             visibility : "hidden"
         }); 
         $('#table2').css({
             visibility : "visible"
         });
    });                     
});
</script>

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

5 个答案: