如何獲得動態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選項卡

回答

相關問題