[JQUERY] 탭(Tab) 기능 hide( ) / show( )

<script type="text/javascript">

$(document).ready(function(){

var conA = $('.newTab h4');   //newTab태그 밑에 있는 h4태그

$(conA).click(function({ 

var conEq = $(conA).index(this);         //선택한 h4태그가 몇번째값인지 구한다.

$('.newTab h4 on').removeClass('on');    //'on'클래스를 지운다

$(this).addClass('on');       //해당 index값에 위치한 h4태그에 'on'클래스를 추가한다.

 

$('.useBoxA').hide();           //전체 useBoxA의 div태그를 숨긴다.

$('.useBoxA').eq(conEq).show();   //해당 index값에 위치한 useBoxA의 div태그를 보여준다. [ eq( ) : 0부터 시작한다 ]

});

});

</script>

<div class="newTab">

<h4 class="tab01 on"><a href="#">탭1</a></h4>

<h4 class="tab02"><a href="#">탭2</a></h4>

<h4 class="tab03"><a href="#">탭3</a></h4>

</div>

<div class="useBoxA">

. . . .

</div>

<div class="useBoxA">

. . . .

</div>