js实现三个表格，显示其中一个，切换时，另两个隐藏的代码

可以使用HTML、CSS和JavaScript实现这个功能。下面是一个基本的示例代码：

HTML代码：

<div>
  <button onclick="showTable(1)">表格1</button>
  <button onclick="showTable(2)">表格2</button>
  <button onclick="showTable(3)">表格3</button>
</div>

<table id="table1">
  <thead>
    <tr>
      <th>表格1标题1</th>
      <th>表格1标题2</th>
      <th>表格1标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格1内容1</td>
      <td>表格1内容2</td>
      <td>表格1内容3</td>
    </tr>
    <tr>
      <td>表格1内容4</td>
      <td>表格1内容5</td>
      <td>表格1内容6</td>
    </tr>
  </tbody>
</table>

<table id="table2" style="display:none;">
  <thead>
    <tr>
      <th>表格2标题1</th>
      <th>表格2标题2</th>
      <th>表格2标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格2内容1</td>
      <td>表格2内容2</td>
      <td>表格2内容3</td>
    </tr>
    <tr>
      <td>表格2内容4</td>
      <td>表格2内容5</td>
      <td>表格2内容6</td>
    </tr>
  </tbody>
</table>

<table id="table3" style="display:none;">
  <thead>
    <tr>
      <th>表格3标题1</th>
      <th>表格3标题2</th>
      <th>表格3标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格3内容1</td>
      <td>表格3内容2</td>
      <td>表格3内容3</td>
    </tr>
    <tr>
      <td>表格3内容4</td>
      <td>表格3内容5</td>
      <td>表格3内容6</td>
    </tr>
  </tbody>
</table>

CSS代码：

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 5px;
}

JavaScript代码：

function showTable(tableNum) {
  var table1 = document.getElementById("table1");
  var table2 = document.getElementById("table2");
  var table3 = document.getElementById("table3");

  if (tableNum == 1) {
    table1.style.display = "";
    table2.style.display = "none";
    table3.style.display = "none";
  } else if (tableNum == 2) {
    table1.style.display = "none";
    table2.style.display = "";
    table3.style.display = "none";
  } else if (tableNum == 3) {
    table1.style.display = "none";
    table2.style.display = "none";
    table3.style.display = "";
  }
}

在上面的代码中，我们通过JavaScript的`getElementById()`方法获取了三个表格的元素，并在`showTable()`函数中根据传入的参数值来控制三个表格的显示和隐藏。当参数为1时，显示第一个表格，隐藏另外两个表格；当参数为2时，显示第二个表格，隐藏另外两个表格；当参数为3时，显示第三个表格，隐藏另外两个表格。我们通过在HTML中设置`style="display:none;"`来使得表格一开始是隐藏的。