如何获得动态HTML选项卡

-5

我有一个基本的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>

来源

2017-03-07 John Seen

让我们了解您到目前为止试过和，请给看看[如何问一个很好的问题]（http://stackoverflow.com/help/how-to-ask）。 – Linuslabo

我已经添加了示例代码。当然，我会研究并改进我的下一个问题。 –

我不知道如果这正是你想要达到什么，但这里有一个短--> 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'); 
});

来源

2017-03-07 12:21:52

谢谢你的小提琴。是的，我正在寻找这个。但最后一件事是我也应该能够点击tab1 info/tab2 info。 onClick应该再次显示带有示例数据的2x2表格。我试图做到这一点，但我得到错误。 –

如何获得动态HTML选项卡

回答

相关问题