استفاده از چند تب در یک صفحه

[Hoomanhpc2 74]

سلام. من برای ایجاد تب در یک صفحه از کد زیر استفاده می کنم:

<table style="width: 100%">
<tr>
<td onclick="showtab('mytab1')">tab 1</td>
<td onclick="showtab('mytab2')">tab 2</td>
<td onclick="showtab('mytab3')">tab 3</td>
</tr>
<tr class="maytabtd1" id="mytab1">
<td colspan="3">tab 1 text</td>
</tr>
<tr class="maytabtd1" id="mytab2" style="display:none">
<td colspan="3">tab 2 text</td>
</tr>
<tr class="maytabtd1" id="mytab3" style="display:none">
<td colspan="3">tab 3 text</td>
</tr>
</table>
<style type="text/css">
.mytabtd1 {
display:none;
}
</style>
<script type="text/javascript">
<!--
function showtab(Down)
{
document.getElementById('mytab1').style.display='none';
document.getElementById('mytab2').style.display='none';
document.getElementById('mytab3').style.display='none';
document.getElementById(Down).style.display='block'
}
//-->
</script>

حالا می خواستم بدونم چطور میشه که از چندین تب در یک صفحه استفاده کرد؟ من کد بالا رو به صورت زیر میذارم درست عمل نمی کنه.

<table style="width: 100%">
<tr>
<td onclick="showtab('mytab1')">tab 1</td>
<td onclick="showtab('mytab2')">tab 2</td>
<td onclick="showtab('mytab3')">tab 3</td>
</tr>
<tr class="maytabtd1" id="mytab1">
<td colspan="3">tab 1 text</td>
</tr>
<tr class="maytabtd1" id="mytab2" style="display:none">
<td colspan="3">tab 2 text</td>
</tr>
<tr class="maytabtd1" id="mytab3" style="display:none">
<td colspan="3">tab 3 text</td>
</tr>
</table>
<style type="text/css">
.mytabtd1 {
display:none;
}
</style>
<script type="text/javascript">
<!--
function showtab(Down)
{
document.getElementById('mytab1').style.display='none';
document.getElementById('mytab2').style.display='none';
document.getElementById('mytab3').style.display='none';
document.getElementById(Down).style.display='block'
}
//-->
</script>


<table style="width: 100%">
<tr>
<td onclick="showtab('mytab4')">tab 4</td>
<td onclick="showtab('mytab5')">tab 5</td>
<td onclick="showtab('mytab6')">tab 6</td>
</tr>
<tr class="maytabtd2" id="mytab4">
<td colspan="3">tab 4 text</td>
</tr>
<tr class="maytabtd2" id="mytab5" style="display:none">
<td colspan="3">tab 5 text</td>
</tr>
<tr class="maytabtd2" id="mytab6" style="display:none">
<td colspan="3">tab 6 text</td>
</tr>
</table>
<style type="text/css">
.mytabtd2 {
display:none;
}
</style>
<script type="text/javascript">
<!--
function showtab(Down)
{
document.getElementById('mytab4').style.display='none';
document.getElementById('mytab5').style.display='none';
document.getElementById('mytab6').style.display='none';
document.getElementById(Down).style.display='block'
}
//-->
</script>

اگه کسی راه حلی داره ممنون میشم راهنماییم کنه.

[Morteza 34190]

یک تست رسیع کردم

بخش دوم هم کار میکنه

توی کد هم به ظاهر مشکلی نیست