如何在顶部、底部和两侧（水平和垂直）有标签

Question

我正在尝试使用 jQuery 选项卡（请参阅tabs）并创建一个带有选项卡的框，包括顶部、底部和两侧。我尝试使用 jQuery 选项卡玩了大约 3 个小时，但我无法弄清楚。

Here 是我要创建的标签框。

Answer 1

为什么要使用选项卡，为什么不将它们放在列表中，根据需要设置 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>

或类似的东西