인프런 커뮤니티 질문&답변

ohl0226님의 프로필 이미지
ohl0226

작성한 질문수

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

3. 공지사항, 갤러리 탭으로 구성하기(HTML+CSS+JQUERY)

변수를 사용하여 탭 기능을 구현해도 될까요?

작성

·

269

2

$(function(){
  $(‘.btn a’).click(function(){
    var tab_n = $(this).index()
    $(‘.tab’).hide()
    $(‘.tab’).eq(tab_n).show()

    $(‘.btn a’).removeClass(‘active’)
    $(this).addClass(‘active)

    return false;
 })
})

<div class="tab tab1"> 이런식으로 tab1 tab2의 클래스 값에 tab를 추가한 다음에 , Btn > a의 순서값을 변수로 잡아서 스크립트를 작성해보았는데요,

이렇게 변수처리해서 사용해도 되나요?

답변 2

2

탭메뉴의 개수가 변동이 있는 경우는 말씀하신 것처럼 하시는 것도 좋은 방법입니다.
하지만 이건 시험이니까 쉽고 명확한 방법 곧, 실수하지 않는 방법으로 영상처럼 만드시는게 좋습니다.
변수처리해서 만든다고 더 좋은 점수를 주는 것도 아니니까 굳이 실수의 위험부담을 갖지 마세요.

코딩웍스 강의 중에 [HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱]라는 실전 예제 강의에 [탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery] 강의에서는 attr() 메서드를 사용해서 만드는 제이쿼리 탭메뉴도 있어요.

실전 작업에서는 좀 복잡해도 위에처럼 자동화가 되는 탭메뉴 만드는게 맞지만 시험이니까 쉽게 영상처럼 연습하세요.

1

ohl0226님의 프로필 이미지
ohl0226
질문자

자세한 설명 감사합니다!

ohl0226님의 프로필 이미지
ohl0226

작성한 질문수

질문하기