제이쿼리 로 만드는 탭메뉴 | 아주쉬운방법

html : 구성방법

div#tabmenu > ul > li  : 탭메뉴

div#tabmenu > dl > dt,dd  : 탭메뉴에따라 바뀌는 하위내용

 

(그래서 li와 dl은 개수가 동일하다. )

 

jquery :

1.일단 첫번째 탭메뉴가 눌러진상태유지

2.다른거 눌렀을 때 변화

- 첫번째꺼 눌렀을때 , 두번째꺼 눌렀을 때 각각 제작

- 내가선택한 탭메뉴를 눌렀을때로 한개 제작

 

1.  $(document).ready(function(){

        $('#tabmenu dl').first().show();

        $('#tabmenu li').first().addClass('on');

2-1.   $('#tabmenu li').eq(1).click(function(){

            $('#tabmenu li').removeClass('on');

            $(this).addClass('on');

            $('#tabmenu dl').hide();

            $('#tabmenu dl').eq(1).show();

        });

        $('#tabmenu li').last().click(function(){

            $('#tabmenu li').removeClass('on');

            $(this).addClass('on');

            $('#tabmenu dl').hide();

            $('#tabmenu dl').last().show();

        });

        $('#tabmenu li').first().click(function(){

            $('#tabmenu li').removeClass('on');

            $(this).addClass('on');

            $('#tabmenu dl').hide();

            $('#tabmenu dl').first().show();

        });

2-2.   $('#tabmenu li').click(function(){

            $('#tabmenu li').removeClass('on');

            $(this).addClass('on');

            $('#tabmenu dl').hide();

            $('#tabmenu dl').eq($(this).index()).show();

        });

    });

 

2-1과 2-2중 하나를 사용하면된다.

하지만 아무래도 개수가 많을수록 2-2방법이 훨씬 유용하다.

 

this에 class를 부여하고,

dl의 몇번째를 지정하는대신, this의 인덱스번호를 불러온다. 같은 순서이기 때문에!