[실습] JQuery를 활용한 탭메뉴 - 사용자정의 속성과 attr()을 이용한 데이터 불러오기

이번 글은 아래 영상에 나온 탭메뉴를 만드는 코드 리뷰이다.

해당 탭메뉴는 이미지를 버튼으로 사용하여 이미지를 누르게 되면 텍스트 내용이 변경되는 코드이다.

 

 

 

---

 

[ 개발 과정 ]

첫번째로 아래 사진과 같이 아무것도 효과도 적용되어있지않는 아래 화면을 만들어준다.

 

그리고 맨 첫번째 이미지에 해당하는 텍스트를 제외한 나머지 텍스트들은 안보이도록 처리해준다.

(맨 첫번째 나오는 이미지와 텍스트에는 추가적으로 클래스명을 따로 부여해 해당 클래스명의 기능으로 이미지가 색상이 있고 둥근 형태이고 텍스트가 보여지는 형태가 되도록 해준다. => 그리고 클릭 시 클릭한 이미지에 추가적으로 부여한 클래스명이 옮겨가는 구조 => 옮겨가면 위에서 만든 클래스의 기능이 옮겨가지는 것 => 옮기는 것은 제이쿼리로 해준다)

 

 

---

 

 

두번째로 아래 코드와 같이 제이쿼리를 통해 이미지를 누르면 해당 이미지와 연결된 텍스트들을 불러온다.

이때 추가적으로 부여한 클래스명은 active라는 이름을 사용하였다.

 

[ JQuery ]

$('.inner-img img').click(function(){
    $(this).addClass('active');
    $(this).siblings().removeClass('active');

    $('.inner-text .content').removeClass('active');
    $('#' + $(this).attr('data-alt')).addClass('active');
})

• 이미지(.inner-img img) 클릭시 해당 이미지(this)에 이미지 색상 생성과 둥근 이미지 active 클래스를 추가해줌
• 해당 이미지(this)의 형제가 위치에 있는 나머지 이미지들(siblings)에는 클래스를 제거해줌
• 텍스트에서도 active를 삭제해줌
• 이미지에 해당하는 텍스트 불러오기 : 이미지에 아래 코드와 같이 사용자 정의 속성으로 data-alt 를 부여하고 텍스트에도 같은 값을 id로 부여해줌 => 해당 이미지(this)의 속성값(id 위치에 해당하는 것)을 불러와 active 클래스를 추가해준다. 이때 텍스트에 부여된 active는 텍스트의 display를 공개하는 효과이다.

아래 코드는 첫번째 이미지에 부여한 사용자 정의 속성 data-alt값이고 tab1이라는 이름을 부여함

<img class="active" src="/image/face-01.jpg" data-alt="tab1">

 

아래 코드는 첫번째 이미지에 해당하는 텍스트에 부여된 id값으로 첫번째 이미지와 동일한 tab1이라는 id를 부여함

<div class="content active" id="tab1">

 

 

---

 

[ 사용자 정의 속성 - attr() ]

attr()을 통해 위의 코드와 같이 만들어준 사용자 정의 속성으로 이어준 값을 불러올 수 있다.

위의 제이쿼리를 보면 attr('data-alt')라고 작성된 부분이 있다.

이 부분은 사용자 정의 속성인 data-alt와 id에 동일하게 tab1이라는 이름을 지정하여 tab1의 data-alt 속성의 속성값으로 tab1값을 가진 id에 해당되는 부분을 가져올 수 있게 만들어준다.

 

 

---