구현한 놈들

모양은 위와같다. 명세는 다음과 같다.

1. 한 페이지에 위와같은 탭이 n개 존재

2. 마우스 오버스 각 탭 이미지 토글

3. 각 페이지마다 탭의 색상이 다름

4. 탭 클릭시 해당 카테고리 위치로 문서내 이동

스크립트 구현)

<script type="text/javascript">

//<![CDATA[

$(function(){

// mouse over

$("table.fortuneAllTab a")

.hover(

   function(){

   $(this).children("img").attr('src', $(this).children("img").attr('src').replace('or.gif', 'ov.gif'));

   },

   function(){

   if( $(this).children("img").hasClass("selected") == false ) {

   $(this).children("img").attr('src', $(this).children("img").attr('src').replace('ov.gif', 'or.gif'));

   }

   }

);

// change tab color group by category

$("table.fortuneAllTab").each(function(idx){

$("table.fortuneAllTab:eq("+idx+") img").each(function(){

$(this).attr('src', $(this).attr('src').replace('bt_all01_', 'bt_all0'+(idx+1)+'_'));

});

});

// toggle current tab image

$("table.fortuneAllTab").each(function(){

var idx = $("table.fortuneAllTab").index(this);

var img = $("table.fortuneAllTab img[name=tab_"+idx+"]:eq("+idx+")");

img.attr('src', img.attr('src').replace('or.gif', 'ov.gif'));

img.addClass("selected");

});

});

//]]>

</script>  

DOM 구성)

<a name="tab_0"></a>

<table class="fortuneAllTab" cellspacing="0" cellpadding="0">

<tr>

<td><a href="#tab_0"><img name="tab_0" src="/images/fortune_result/bt_all01_01or.gif" /></a></td>

<td><a href="#tab_1"><img name="tab_1" src="/images/fortune_result/bt_all01_02or.gif" /></a></td>

<td><a href="#tab_2"><img name="tab_2" src="/images/fortune_result/bt_all01_03or.gif" /></a></td>

<td><a href="#tab_3"><img name="tab_3" src="/images/fortune_result/bt_all01_04or.gif" /></a></td>

<td><a href="#tab_4"><img name="tab_4" src="/images/fortune_result/bt_all01_05or.gif" /></a></td>

<td><a href="#tab_5"><img name="tab_5" src="/images/fortune_result/bt_all01_06or.gif" /></a></td>

<td><a href="#tab_6"><img name="tab_6" src="/images/fortune_result/bt_all01_07or.gif" /></a></td>

</tr>

</table>

<a name="tab_1"></a>

<table class="fortuneAllTab" cellspacing="0" cellpadding="0">

<tr>

<td><a href="#tab_0"><img name="tab_0" src="/images/fortune_result/bt_all01_01or.gif" /></a></td>

<td><a href="#tab_1"><img name="tab_1" src="/images/fortune_result/bt_all01_02or.gif" /></a></td>

<td><a href="#tab_2"><img name="tab_2" src="/images/fortune_result/bt_all01_03or.gif" /></a></td>

<td><a href="#tab_3"><img name="tab_3" src="/images/fortune_result/bt_all01_04or.gif" /></a></td>

<td><a href="#tab_4"><img name="tab_4" src="/images/fortune_result/bt_all01_05or.gif" /></a></td>

<td><a href="#tab_5"><img name="tab_5" src="/images/fortune_result/bt_all01_06or.gif" /></a></td>

<td><a href="#tab_6"><img name="tab_6" src="/images/fortune_result/bt_all01_07or.gif" /></a></td>

</tr>

</table>

.

.

.

.

.

.

n

나중에 ㅆㅓ먹을 일은 없을 듯 하다ㅡ.ㅡ;