如何获得动态HTML选项卡
问题描述:
我有一个基本的HTML页面,有一个表格,2列& 2行。 我想将这2列转换为制表符,并且在每行的单击时它还应该显示一行或一行更多的基本表格,其中1行&列。如何获得动态HTML选项卡
一切都应该发生在第一个表本身。
我该怎么做?我应该使用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>
答
我不知道如果这正是你想要达到什么,但这里有一个短--> fiddle <--
您将需要使用JavaScript。
HTML:
<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>
CSS:
.tab-content.not-active {
display: none;
}
的jQuery:
$('.tab').on('click', function() {
$('.tab').toggleClass('not-active');
$('.tab-content').toggleClass('not-active');
});
+0
谢谢你的小提琴。是的,我正在寻找这个。但最后一件事是我也应该能够点击tab1 info/tab2 info。 onClick应该再次显示带有示例数据的2x2表格。我试图做到这一点,但我得到错误。 –
让我们了解您到目前为止试过和,请给看看[如何问一个很好的问题](http://*.com/help/how-to-ask)。 – Linuslabo
我已经添加了示例代码。当然,我会研究并改进我的下一个问题。 –