// 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();
}
// tab
<ul id="news_tab" class="news_menu">
<li><a href="#news1" class="tab"><img src="image/btn_news1.gif" alt="기독교 뉴스" /></a></li> // a태그 #값
<li><a href="#news2" class="tab"><img src="image/btn_news2.gif" alt="일반 뉴스" /></a></li>
</ul>
<div id="news1"></div>
<div id="news2"></div>
페이지 하단 삽입
<script type="text/javascript">
initTabMenu("news_tab");
</script>
출처 : 네이버 하코사 카페 희야님
'Web story > Javascript' 카테고리의 다른 글
기본팝업 js (0) | 2010.01.08 |
---|---|
표준적인 iframe 배경 투명 (0) | 2009.12.17 |
사파리 브라우저의 input 효과 비슷하게 하기 (0) | 2009.03.27 |
플래시 스크립트 (0) | 2009.02.17 |
텍스트 사이즈 조절 스크립트 (0) | 2009.02.17 |