Web story/Javascript

탭메뉴

JKJ1004 2009. 6. 5. 17:35


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