如何在顶部，底部和两侧（水平和垂直）设置标签

Question

我正在尝试使用jQuery标签（请参阅tabs）并创建一个包含标签的框，包括顶部，底部和两侧。我尝试使用jQuery标签大约3个小时，我无法弄清楚。

Here是我正在尝试创建的标签框。

Answer 1

为什么要使用标签，为什么不将它们放在列表中，按照你想要的样式设置ul和li元素的样式，就像在图像中一样，只需要一个通用的切换来显示内容，使用匹配的id用于li和内容。例如：

<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>

或其他相似的东西