<HTML>
<HEAD>
<TITLE>내부 탭 변환</TITLE>
<script language="javascript">
<!--
function tabChg(tabAllNum, tabSelfNum) //tabAllNum은 전체 탭의 수,
{ //tabSelfNum은 자신의 순서
for(i=1; i<=tabAllNum; i++)
{
if( i==tabSelfNum ) //자신의 순서가 맞다면 화면에 보여주고 그렇지 않다면 보여주지 않음
{
document.getElementById ('tabChg_'+ tabSelfNum).style.display='';
}
else
{
document.getElementById ('tabChg_' + i).style.display='none';
}
}
}
//-->
</script>
</HEAD>
<BODY>
<!-- 첫번째 내부 탭 시작 -->
<div id="tabChg_1" style="display: ;" >
<span style="color:tomato">첫번째 탭</span>
<a href="javascript:tabChg(3,2)"><span style="color:gray">두번째 탭</span></a>
<a href="javascript:tabChg(3,3)"><span style="color:gray">세번째 탭</span></a>
</div>
<!-- 첫번째 내부 탭 끝 -->
<!-- 두번째 내부 탭 시작 -->
<div id="tabChg_2" style="display: none;" >
<a href="javascript:tabChg(3,1)"><span style="color:gray">첫번째 탭</span></a>
<span style="color:tomato">두번째 탭</span>
<a href="javascript:tabChg(3,3)"><span style="color:gray">세번째 탭</span></a>
</div>
<!-- 두번째 내부 탭 끝 -->
<!-- 세번째 내부 탭 시작 -->
<div id="tabChg_3" style="display: none;" >
<a href="javascript:tabChg(3,1)"><span style="color:gray">첫번째 탭</span></a>
<a href="javascript:tabChg(3,2)"><span style="color:gray">두번째 탭</span></a>
<span style="color:tomato">세번째 탭</span>
</div>
<!-- 세번째 내부 탭 끝 -->
</BODY>
</HTML>
=========================================================================================
자바스크립트를 이용한 내부 자체적으로 변환하는 탭 형태이다.
내부 자체적으로 변환할때 좋은 점은 서버에 요청을 할 필요가 없다는 것이다.
실행 시간이 빠르지만 그 만큼 필요한 정보가 간단하고 변하지 않아야 한다.
데이타베이스의 정보가 필요하지 않을 때 사용하면 좋지만 정보가 변하면 어쩔 수 없이 자체 소스를 바꿔줘야 한다 ㅠ
데이타베이스를 사용하면 데이타베이스내의 정보만 바꾸면 돼지만 ㅋㅋ
게다가 소스가 복잡해지고 많아진다면 내부 탭을 사용하지 말아야 한다.
더욱 복잡해지고 소스도 많아진다. 탭의 갯수가 늘수록 더욱 더 늘어난다;;
그럴 때는 그냥 하나씩 만드는게 낫겠다;;
너무 무책임한가 ㅋ
'Study > Web' 카테고리의 다른 글
| [PHP] 가변변수에 대해서 (2) | 2008/10/24 |
|---|---|
| [JAVASCRIPT]Html에서 탭형식 내부변환하기 (2) | 2007/03/12 |
| [HTML]Div와 Span (2) | 2007/03/12 |
| 다음 샘플 테스트 (2) | 2007/01/09 |
