Jquery 如何在顶部、底部和两侧设置选项卡（水平和垂直）

我正在尝试使用jQuery选项卡（请参阅），并创建一个框，框的四周、顶部、底部和两侧都有选项卡。我试着用jQuery标签玩了大约3个小时，但我不明白

---

是我正在尝试创建的选项卡框。

为什么要使用选项卡，为什么不将它们放在列表中，按照您的意愿设计ul和li元素的样式，就像在图像中一样，并且只需使用通用切换来显示内容，使用li和内容的匹配id即可。例如：

<ul class="food_thumbs">
<li data-food="apple">apple image</li>
<li data-food="orange">orange image</li>
<li data-food="pear">pear image</li>
</ul>

<ul class="food_content">
<li data-food="apple">apple text</li>
<li data-food="orange">orange text</li>
<li data-food="pear">pear text</li>
</ul>

苹果形象
橙色图像
梨图像


苹果文本
橙色文本
pear文本

---

或者类似的东西

您可能正在查看“4”选项卡组-顶部、左侧、右侧、底部…您能举例说明您在这方面做得有多好吗？以下是我迄今为止得到的结果，但我无法将其嵌套在底部和右侧的4个边选项卡中？？