web standard/script2011. 1. 6. 17:23
<script type="text/javascript">
<!--
// tab
function initTabMenu(tabContainerID) {
var tabContainer = document.getElementById(tabContainerID);
var tabAnchor = tabContainer.getElementsByTagName("a");
var i = 0;

for(i=0; i<tabAnchor.length; i++) {
if (tabAnchor.item(i).className == "tab")
thismenu = tabAnchor.item(i);
else
continue;

thismenu.container = tabContainer;
thismenu.targetEl = document.getElementById(tabAnchor.item(i).href.split("#")[1]);
thismenu.targetEl.style.display = "none";
thismenu.imgEl = thismenu.getElementsByTagName("img").item(0);
thismenu.onclick = function tabMenuClick() {
currentmenu = this.container.current;
if (currentmenu == this)
return false;

if (currentmenu) {
currentmenu.targetEl.style.display = "none";
if (currentmenu.imgEl) {
currentmenu.imgEl.src = currentmenu.imgEl.src.replace("_on.gif", ".gif");
}
else {
currentmenu.className = currentmenu.className.replace(" on", "");
}
}
this.targetEl.style.display = "";
if (this.imgEl) {
this.imgEl.src = this.imgEl.src.replace(".gif", "_on.gif");
}
else {
this.className += " on";
}
this.container.current = this;

return false;
};

if (!thismenu.container.first)
thismenu.container.first = thismenu;
}
if (tabContainer.first)
tabContainer.first.onclick();
}
//-->
</script>

<table id="news_tab" border='1' bordercolor='#DFDFDF' style='border-collapse:collapse' cellpadding='5' cellspacing='0'>
<tr bgcolor='#F4F4F4'>
<td><a href="#news1" class="tab">tab menu1</a></td>
<td><a href="#news2" class="tab">tab menu2</a></td>
<td><a href="#news3" class="tab">tab menu3</a></td>
<td><a href="#news4" class="tab">tab menu4</a></td>
<td><a href="#news5" class="tab">tab menu5</a></td>
<td><a href="#news6" class="tab">tab menu6</a></td>
<td><a href="#news7" class="tab">tab menu7</a></td>
<td><a href="#news8" class="tab">tab menu8</a></td>
<td><a href="#news9" class="tab">tab menu9</a></td>
<td><a href="#news20" class="tab">tab menu20</a></td>
<td><a href="#news21" class="tab">tab menu21</a></td>
<td><a href="#news22" class="tab">tab menu22</a></td>
</tr>
<tr>
<td colspan='12'>
<table id="news1"><tr><td>tab menu1 contents1</td></tr></table>
<table id="news2"><tr><td>tab menu2 contents2</td></tr></table>
<table id="news3"><tr><td>tab menu3 contents3</td></tr></table>
<table id="news4"><tr><td>tab menu4 contents4</td></tr></table>
<table id="news5"><tr><td>tab menu5 contents5</td></tr></table>
<table id="news6"><tr><td>tab menu6 contents6</td></tr></table>
<table id="news7"><tr><td>tab menu7 contents7</td></tr></table>
<table id="news8"><tr><td>tab menu8 contents8</td></tr></table>
<table id="news9"><tr><td>tab menu9 contents9</td></tr></table>
<table id="news20"><tr><td>tab menu20 contents20</td></tr></table>
<table id="news21"><tr><td>tab menu21 contents21</td></tr></table>
<table id="news22"><tr><td>tab menu22 contents22</td></tr></table>
</td>
</tr>
</table>
<script type="text/javascript">
initTabMenu("news_tab");
</script>

Posted by 수라