Jquery 如何获取动态HTML选项卡

我有一个基本的HTML页面，有一个2列2行的表。 我想将这两列转换为选项卡，单击每一行，它还应该显示一个段落或一个包含一行和一列的基本表

一切都应该在第一个表中发生

我该怎么做？我应该使用jQuery吗？任何一个小链接都会非常有用

<table width="100%" id="table" class="table" border="1" cellpadding="0" cellspacing="0">
<tr>
    <td><div contenteditable>tab1</div></td>
    <td><div contenteditable>tab2</div></td>
        </tr>
<tr>
    <td><div contenteditable>tab1 info</div></td>
    <td><div contenteditable>tab2 info</div></td>
</tr>

表1
表2
表1信息
表2信息

---

我不确定这是否正是您想要达到的目标，但这里有一个简短的-->提琴，向我们展示您迄今为止所做的尝试，请看一看。我已经添加了示例代码。当然，我会研究并改进我的下一个问题。谢谢你的指点。是的，我在找这个。但最后一件事是，我还应该能够单击tab1 info/tab2 info。onClick应该再次显示一个包含示例数据的2x2表。我试着去做，但我犯了错误。

<table>
  <tr>
    <td class="tab"><div contenteditable>tab1</div></td>
    <td class="tab not-active"><div contenteditable>tab2</div></td>
  </tr>
  <tr>
    <td>
      <div contenteditable class="tab-content">tab1 info</div>
      <div contenteditable class="tab-content not-active">tab2 info</div>
    </td>
  </tr>
</table>

.tab-content.not-active {
  display: none;
}

$('.tab').on('click', function () {
    $('.tab').toggleClass('not-active');
    $('.tab-content').toggleClass('not-active');
});