在html中ul有多个li元素当点击每个li时在同一个地方切换显示不同的表格元素

在HTML中，你可以通过JavaScript或者jQuery来实现这个功能。当用户点击`<li>`元素时，隐藏当前显示的表格，并切换显示预设的不同表格。这里是一个简单的示例：

首先，你需要有几个表格元素，并且给每个表格元素设置一个唯一的ID，比如`table1`, `table2`, `table3`等。然后，创建一个共同的容器来存放这些表格，例如`<div id="tableSwitcher">`。

HTML部分：

<ul id="liList">
  <li data-table-id="table1">点击显示表1</li>
  <li data-table-id="table2">点击显示表2</li>
  <!-- 添加更多li... -->
</ul>
<div id="tableSwitcher" style="display:none;">
  <table id="table1"></table>
  <table id="table2"></table>
  <!-- 更多表格... -->
</div>

JavaScript部分（假设使用jQuery）：

$(document).ready(function() {
  $('#liList li').click(function() {
    var currentTableId = $(this).data('table-id');
    $('#tableSwitcher table').hide(); // 隐藏所有表格

    $('#' + currentTableId).fadeIn(); // 根据li的data属性选择并显示对应的表格
  });
});

当用户点击列表项时，JavaScript会读取`data-table-id`属性，切换相应的表格显示。初始时，`tableSwitcher`里的表格都默认隐藏（`display: none`），只有第一个表格默认可见（如果有的话）。