JavaScript 로 탭 구현하기

Web/JavaScript

by 탑~! 2012. 7. 6. 10:58

JavaScript 로 탭 구현하기

.tabNavi

{

}

.tabNavi ul

{

padding:0;

margin:0;

}

.tabNavi ul li

{

padding:0;

margin:0;

list-style: none;

float:left;

}

/* TAB ON 했을때 BORDER 필요시. */

.tabNavi table.search_table

{

border-top:solid 2px #2b786c;

border-left:solid 2px #2b786c;

border-right:solid 2px #2b786c;

border-bottom:solid 2px #2b786c;

}

.tabNavi_on

{

padding-right:10px;

padding-left:10px;

dispaly:inline-block;

width:110px;

height:23px;

color:#fff;

font-family: "Arial", "gulim";

font-size:11px;

/*background-color:#fff;

border:1px solid #aaa;*/

text-align:center;

background:url(/htdocs/images/button/btn_tab_on.jpg) no-repeat 0 0;

}

.tabNavi_on

{

padding-top:5px;

dispaly:inline-block;

width:118px;

height:23px;

color:#fff;

font-family: "Arial", "gulim";

font-size:11px;

/*background-color:#fff;

border:1px solid #aaa;*/

text-align:center;

background:url(/htdocs/images/button/btn_tab_on.jpg) no-repeat 0 0;

}

a.tabNavi_on:link { font-family: "Arial", "굴림"; font-size: "11px"; color: "#fff"; text-decoration: "none"; font-weight: bold;}

a.tabNavi_on:visited { font-family: "Arial", "굴림"; font-size: "11px"; color: "#fff"; text-decoration: "none"; font-weight: bold;}

a.tabNavi_on:active { font-family: "Arial", "굴림"; font-size: "11px"; color: "#fff"; text-decoration: "none"; font-weight: bold;}

a.tabNavi_on:hover { font-family: "Arial", "굴림"; font-size: "11px"; color: "#fff"; text-decoration: "underline";}

.tabNavi_off

{

padding-top:5px;

dispaly:inline-block;

width:118px;

height:23px;

background-color:#ddd;

text-align:center;

background:url(/htdocs/images/button/btn_tab_off.jpg) no-repeat 0 0;

}

a.tabNavi_off:link { font-family: "Arial", "굴림"; font-size: "11px"; color: "#515151"; text-decoration: "none"; }

a.tabNavi_off:visited { font-family: "Arial", "굴림"; font-size: "11px"; color: "#515151"; text-decoration: "none"; }

a.tabNavi_off:active { font-family: "Arial", "굴림"; font-size: "11px"; color: "#515151"; text-decoration: "none"; }

a.tabNavi_off:hover { font-family: "Arial", "굴림"; font-size: "11px"; color: "#515151"; text-decoration: "underline";}

// ********************************************

// 기 능 : 탭 클릭시 탭 활성화와 이미지 변경...

// funShowTab('tab1',3,1)

// 이미지를 변경하고자 하는 경우에는

// <img id="img_tab1_1" src="aon.gif"> 처럼 ID 에 img_그룹명_순번 으로 넣어준다.

// ********************************************

function funShowTab(vTabName, vTotTabCnt, vTabNo)

{

// vTabName 탭 그룹 명

// vTotTabCnt 그룹내 탭의 수

// vTabNo 활성화 탭 번호

if (vTabName == "")

return; //탭 그룹 명이 없으면 나간다.

var vTab = null; // 탭

var vTabObj = null;

// 보이고자 하는 탭을 제외하고는 안보이도록 한다.

var vTabFor = 1;

for (vTabFor = 1; vTabFor <= vTotTabCnt; vTabFor++) {

vTab = vTabName + "_" + eval(vTabFor); // 탭 id

var vTabObj = document.getElementById(vTab); // ID가 존재하면 실행

if (vTabObj) {

if (vTabFor == eval(vTabNo)) {

vTabObj.style.display = ''; // 영역을 보인다

} else {

vTabObj.style.display = 'none'; // 영역을 숨긴다..

} // end if

} // end for

var vChgImg = null;

var vImgExt = "gif"; // 이미지 확장자명

var onOffSep = "on"; // onoff 구분자. on일때 aon.gif , off 일때 a.gif 이면 구분자는 on 이 된다.

var vImgExtLen = vImgExt.length; // 확장자명 크기.

var onOffSepLen = onOffSep.length; // onoff 구분자.

var vTabFor = 1;

for (vTabFor = 1; vTabFor <= vTotTabCnt; vTabFor++) {

vTab = "tabGroup" + eval(vTabFor); // 실제 보이고자 하는 탭 id

var vTabObj = document.getElementById(vTab); // 텝 이미지명

//var orgImg = vTabObj.src; // 현재 이미지

//var onOff = orgImg.substr(orgImg.length - 6, 2); // 단어가 ON 인지 확인.

if (vTabObj) {

if (vTabFor == eval(vTabNo)) {

vTabObj.className = "tabNavi_on";

} else {

vTabObj.className = "tabNavi_off";

} // end if

} // end for

// 선택 탭 이미지를 변경한다.

// var vChgImg = null;

// var vImgExt = "gif"; // 이미지 확장자명

// var onOffSep = "on"; // onoff 구분자. on일때 aon.gif , off 일때 a.gif 이면 구분자는 on 이 된다.

//

// var vImgExtLen = vImgExt.length; // 확장자명 크기.

// var onOffSepLen = onOffSep.length; // onoff 구분자.

//

// var vTabFor = 1;

// for (vTabFor = 1; vTabFor <= vTotTabCnt; vTabFor++) {

//

// vTab = "img_" + vTabName + "_" + eval(vTabFor); // 실제 보이고자 하는 탭 id

//

// var vTabObj = document.getElementById(vTab); // 텝 이미지명

//

// var orgImg = vTabObj.src; // 현재 이미지

// var onOff = orgImg.substr(orgImg.length - 6, 2); // 단어가 ON 인지 확인.

//

// if (vTabObj) {

// if (vTabFor == eval(vTabNo)) {

// // 보여야 하므로 ON 을 붙여야 하는데 이미 ON 이 있으면 그냥..

// if (onOff != onOffSep) {

// vChgImg = orgImg.substr(0, orgImg.length

// - (vImgExtLen + 1))

// + onOffSep + "." + vImgExt;

// vTabObj.src = vChgImg;

// }

// } else {

// // 이미지를 ON 제외.

// if (onOff == onOffSep) {

// vChgImg = orgImg.substr(0, orgImg.length

// - (vImgExtLen + onOffSepLen + 1))

// + "." + vImgExt;

// vTabObj.src = vChgImg;

// }

// } // end if

// } // end for

}

<ul>

<li><a href="javascript:funShowTab('tab1',4,1);" class="tabNavi_off" id="tabGroup1">Value Function</a></li>

<li><a href="javascript:funShowTab('tab1',4,2);" class="tabNavi_off" id="tabGroup2">Formula Function</a></li>

<li><a href="javascript:funShowTab('tab1',4,3);" class="tabNavi_off" id="tabGroup3">DB Function</a></li>

<li><a href="javascript:funShowTab('tab1',4,4);" class="tabNavi_off" id="tabGroup4">Table Function</a></li>

</ul>

</div>

<ul>

<li>

<tr>

<td>

</colgroup>

<tr>

</tr>

<tr>

<td height="10" width="100%" valign="top" colspan="2" class="data_area">Value Function Detail</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td class="caption">Lumpsum</td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</li>

</ul>

</div>

<ul>

<li>

<tr>

<td>

</colgroup>

<tr>

</tr>

<tr>

<td height="10" width="100%" valign="top" colspan="2" class="data_area">Formula Function Detail</td>

</tr>

<tr>

<tr>

<tr>

<td>

<jsp:include page="/include/Validate.html"/>

</td>

<td>

<jsp:include page="/include/Apply.html"/>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="caption" style="height:100;">Formula</td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</li>

</ul>

</div>

<ul>

<li>

<tr>

<td>

</colgroup>

<tr>

</tr>

<tr>

<td height="10" width="100%" valign="top" colspan="2" class="data_area">DB Function Detail</td>

</tr>

<tr>

<tr>

<tr>

<td>

<jsp:include page="/include/Read.html"/>

</td>

<td>

<jsp:include page="/include/Generation.html"/>

</td>

<td>

<jsp:include page="/include/Test.html"/>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="caption">EXEC String</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

</li>

</ul>

</div>

<ul>

<li>

<tr>

<td>

</colgroup>

<tr>

</tr>

<tr>

<td height="10" width="100%" valign="top" colspan="2" class="data_area">Table Function Detail</td>

</tr>

<tr>

<tr>

<tr>

<td>

<jsp:include page="/include/Test.html"/>

</td>

<td>

<jsp:include page="/include/Up1.html"/>

</td>

<td>

<jsp:include page="/include/Down1.html"/>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

</li>

</ul>

</div>

저작자표시 비영리 변경금지

'Web > JavaScript' 카테고리의 다른 글

javascript trim 구현 (0)	2012.08.18
javascript 정규식 (0)	2012.07.12
JavaScript 에서 특정 문자열로 감싸여 있는 문자열을 모두 반환한다. (0)	2012.07.06
특정 영역을 페이지 특정 위치로 위치되게 (0)	2012.06.26
JavaScript 참고 사이트 (0)	2012.06.26