Html 如何创建具有切换标签内容的表格?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7114180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a table with switching tab content?
提问by Chan
I want to make a table looks like this:
我想让一张桌子看起来像这样:
The inside table is not an issue but don't know how to create the outer frame which includes "Item Descriptions", "Shipping", and "Returns" tabs. A minimal example would be greatly appreciated. Thank you.
内表不是问题,但不知道如何创建包括“项目描述”、“运输”和“退货”选项卡的外框架。一个最小的例子将不胜感激。谢谢你。
回答by itsmatt
You could certainly use jQuery to solve this. That's what I did when I needed some tabs. I did something like:
你当然可以使用 jQuery 来解决这个问题。当我需要一些标签时,这就是我所做的。我做了类似的事情:
<ul>
<li><a href="#tab-description">Description</a></li>
<li><a href="#tab-shipping">Shipping</a></li>
<li><a href="#tab-returns">Returns</a></li>
</ul>
<div id="tab-description" class="mytabs">
</div>
<div id="tab-shipping" class="mytabs">
</div>
<div id="tab-returns" class="mytabs">
</div>
and then some jQuery to make the tabs:
然后使用一些 jQuery 来制作标签:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#mytabs").tabs({ fx: {opacity: 'toggle'} });
});
</script>
works pretty nicely for me. Just fill in whatever your content is in each of the divs.
对我来说效果很好。只需填写每个 div 中的内容即可。