jquery

JQUERY – 탭 메뉴 만들기

RYUHA/ editor

  • 1 comments
  • 3,065 views
  • 2017년 9월 5일

중첩함수, 클로저를 이용해서 tab 만들기

jquery의 함수에 대해 익힐 수 있는 탭 메뉴를 만들어 보겠습니다.
완성한 내용은 이렇습니다.

on html5around.com

간단하게 만들었지만 꾸미면 다양한 메뉴로 활용이 가능합니다. 사이드 메뉴나 nav로도 활용해봅시다.
사용되는 지식은 중첩 함수, 클로저 함수입니다.

중첩함수는 간단하게, 중복되는 코드나 기능을 가지는 코드를 그룹화 시켜 하나의 함수로 만들어 재사용과 유지 보수가 쉬워지게 만드는 것입니다.
클로저는 내부함수가 외부 함수에 접근해서 그 데이터를 사용할 수 있는 것입니다. 아래에서 쓰이는 내부함수는 중첩함수이면서 클로저 함수이게 됩니다.

이제 만들어봅시다.


# 시작

필요한 것들을 생각해봅니다.

먼저 클릭 이벤트 등, 탭 선택하는 이벤트 및 함수들을 실행할 전체 함수가 필요할 것이고,
그 함수 안에서는 선택된 아이들을 저장할 변수가 필요할 것입니다.

그렇담 함수 안에선 1. 변수 선언, 2. 기존에 선택된 것이 있을지 모르니 초기화, 3. 클릭이벤트, 4. 선택한 탭에 클래스 추가하기 의 기능이 필요할 것입니다.

그럼 쭉 코드를 작성해서 정리해볼까요??

<style>
    .tab {
        margin: 50px 400px;
        text-align: center;
        list-style: none;
        height:80px;
    }

    .tab li {
        width:40px;
        height:30px;
        padding: 10px 20px 0;
        background-color: #ED9EBD;
        color: white;
        overflow: hidden;
        display: inline-block;
        float:left;
    }
    .tab li:hover {
        background-color: #B5EAA2;
    }
    .tab li.select {
        background-color: #83B14E;
    }
</style>
<script>
        $(function(){
            //가장 먼저 실행될 함수.
            selectTab("#tab");
        });

        function selectTab(selector){
            // 선택된 탭을 저장할 변수
            var selectedTab =null;

            // 탭들을 전부 저장함.
            var Tabs = $(selector).find("li");

            // 탭에 클릭 이벤트가 발생하면 실행될 부분.
            Tabs.click(function(){
                // 기존 선택된 탭이 있으면 초기화.
                if(selectedTab!=null){
                    selectedTab.removeClass("select");
                }

                // 선택된 li 탭을 새로 저장.
                selectedTab = $(this);
                // select 클래스를 추가해서 선택시킴.
                selectedTab.addClass("select");
            });

        }
    </script>
<body>
        <ul class="tab" id="tab">
            <li>Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
            <li>Tab4</li>
        </ul>
</body>

 

굉장히 간단하죠? 이렇게만 해도 잘 구현이 됩니다.

그치만 좀더 예쁘게 함수화 시켜서 다시 바꿔볼게요.
보면 탭 초기화, 클릭이벤트, 클래스 추가 3개로 나누어서 정리하면 될 것 같습니다.
스크립트 단만 보겠습니다.

$(function(){
  //가장 먼저 실행될 함수.
  selectTab("#tab");
});

function selectTab(selector){
  // 선택된 탭을 저장할 변수
  var selectedTab =null;
  var Tabs = null;

  init(selector);
  clickEvent();

 	function init (selector) {
    // 탭들을 전부 저장함.
    // 간단한 탭이라 이정도 이지만 다른, selectTab함수에서 쓰이는 모든 변수들은 여기서 초기화 합니다.
    Tabs = $(selector).find("li");
  }

  function clickEvent () {
    // 탭에 클릭 이벤트가 발생하면 실행될 부분.
    Tabs.click(function(){
        setSelected($(this));
      });
  }

  function setSelected (tab) {
    // 기존 선택된 탭이 있으면 초기화.
    if(selectedTab!=null){
      selectedTab.removeClass("select");
    }
    // 선택된 li 탭을 새로 저장.
    selectedTab = tab;
    // select 클래스를 추가해서 선택시킴.
    selectedTab.addClass("select");
  }
}

 

주석 달린 것을 보면 쉽게 이해하실 수 있을 거예요.
간단한 탭을 통해서 중첩 함수와 클로저에 대해 알아보았습니다.

RYUHA

만들어 보면서 하나씩 글 씁니당:)

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
jquery 실습생 Recent comment authors
newest oldest most voted
jquery 실습생
Guest
jquery 실습생

안녕하세요 궁금한점이 있어서 댓글남김니다~!
홈페이지만들고 있는 초보실습생이구요~
jquery로 간단한 메뉴를 만들고있는데요

작성자분이 작성하신 완성된 코드에서
클릭했을때 나타나는 진한 녹색을 저는 밑줄로 바꾸고 싶은데요..
그 방법은 알고있는데.. 여기서 조금더 심화된 방법이 저는 궁금한겁니다ㅠㅠ

예를들어서,

  • menu
  • 일때, 링크가 걸리면서
    menu 에 밑줄이 생기는데,
    홈페이지를 열었을때는, 밑줄표시가 없다가 특정 탭을 클릭했을때만 밑줄이
    지속적으로 생기게 하는 그 방법이 궁금합니다 !

    마치 본페이지 상단에 튜토리얼 게시판 코드연습장 어바웃 밑에 나오는 밑줄처럼요!