So erhalten Sie dynamische HTML-Registerkarten

Question

Ich habe eine einfache HTML-Seite mit einer Tabelle mit 2 Spalten & 2 Zeilen. Ich möchte diese 2 Spalten als Tabs konvertieren und beim Klicken jeder Zeile sollte auch ein Absatz oder eine weitere Basistabelle mit 1 Zeile & Spalte angezeigt werden.

Alles sollte in der ersten Tabelle selbst passieren.

Wie kann ich das tun? Soll ich jQuery verwenden? Jede Geige wäre großartig.

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

Answer 1

Ich bin mir nicht sicher, ob das ist genau das, was Sie erreichen, wollten Sie Javascript, aber hier ist eine kurze --> fiddle <--

Sie müssen verwenden.

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'); 
});