4_기타 패턴 1) 탭 메뉴

4-1_탭 메뉴.zip

0.26MB

 

html

탭 메뉴의 구조는 기본적으로 다음과 같습니다.

<div class= tab> - <ul class="menu"> - <li><h3>공지사항</h3></li>

                                                   - <li><h3>갤러리</h3></li>

                       - <ul class="contents"> - <li><table></table></li>*table 간략화

                                                       - <li><img src="경로값" alt=""></li>*img 간략화

 

핵심은 메뉴 영역과 컨텐츠 영역을 나누는 것입니다. 

css

여기서 menu 따로, contents따로 꾸며주면 됩니다. 

중요한 것은 첫 화면에는 공지사항 컨텐츠가 출력이 되고 있도록 맞춰 둬야 합니다.

즉, 1번째를 제외한 나머지는 출력되면 안 됩니다. 이때 :not(:first-child)를 사용합니다.

(.main .tab .contents li:not(:first-child){display:none;})

 

또한 2번째 영역만 지칭하기 위해서는 nth-child(2)를 사용해 줍시다.

2번째 리스트만 속성을 지정할 수 있습니다.

.main .tab .contents li:nth-child(2){width:400px; height:150px; text-align:center; line-height:150px;})

 

또한 만약 탭 메뉴 바에 하이라이트 효과를 넣어주고 싶다면, 

li.on 이란 클래스를 따로 만들고 하이라이트 속성을 사전에 지정하여 저장해 둬야 합니다.

javascript

 

-> $('.tab .menu li h3').eq(0).addClass('on'); 

사전에 미리 on 클래스를 지칭하는 것 보다 javascript를 통해서 on클래스를 지칭하는게 

유지보수나 관리 측면에서 훨씬 낫습니다. 클래스 추가를 하기 위해서는 addClass('on')속성을 사용합니다. 

여기서 '.on'이 아니라 'on'임에 주목해주시길 바랍니다. html 코드에 추가하는 것이므로 클래스를 상징하는 점 ( . ) 이 빠집니다.

 

1_ 변수 데이터 저장

     var index = $(this).index();

 

개별 지칭으로 뭔가 하기 위해서는 항상 index 값이 필요하므로, 

index 변수를 선언하고 $(this).index(); 값을 넣어줍니다.

여기서 this는 구체적으로 이벤트가 반환된 대상을 가리킵니다. 따옴표는 지정하지 않습니다.

 

 

2_ 초기화 과정

     $('.tab .contents li').hide();

     $('.tab .menu li h3').removeClass('on'); 

 

     만약 1을 눌렀을 때는 2의 효과는 사라져야 합니다. 

     개별로 이전에 눌렀던 대상을 변수로 지정해서 컨트롤 할 수 있지만, 

     그렇게 되면 너무 많은 코드를 작성해야 하므로,

     간단하게 모든 내용을 초기화 시킵니다. (클래스 삭제, 모든 컨텐츠 숨기기)

 

3_ 지칭한 컨텐츠 보여주기

    $('.tab .contents li').eq(index).show();

 

    1번 메뉴를 클릭했으면 1번 컨텐츠를, 2번 메뉴를 클릭했으면 2번 컨텐츠를 보여줍니다.

 

4_ 지칭한 메뉴에 클래스 부여하기

    $('.tab .menu li h3').eq(index).addClass('on');

 

    클릭한 메뉴에 클래스를 부여합니다. 저는 h3이라는 요소를 하나 더 껴서

    꾸미는 영역과 작동을 위한 구조 영역을 분리했습니다.