jQuery 로 탭 만들어 보기

예제 소스 다운로드

tab.zip


on, off 이미지로 탭 만들기 (요즘은 거의 이렇게 안 쓰지만 불가피하게 쓸 경우가 있는것 같아서..)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>탭</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.3.1.min.js"></script>

    <style>
        .tabs a {cursor: pointer;}
    </style>
</head>
<body>
    <!-- 탭1 -->
    <div>
        <div class="tabs">
            <a><img src="/img/tab_service01_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
        </div>

        <div class="panel">탭1 첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">탭1 두번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <!-- 탭2 -->
    <div>
        <div class="tabs">
            <a><img src="/img/tab_service01_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
        </div>

        <div class="panel">탭2 첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">탭2 두번째 패널<br/><br/><br/><br/>끝</div>
        <div class="panel">탭2 세번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <script>
        $(".tabs").each(function(){
            var tabs = $(this).find("a");               // 탭버튼
            var panels = $(this).nextAll(".panel");     // 탭패널
    
            tabs.on("click", function(){
                var clk = $(this);
                var idx = tabs.index(clk);  // 클릭한 index
                
                // 모든 패널을 안보이게 한다음 클릭한 idx 에 해당하는 패널만 보이게
                panels.hide();
                panels.eq(idx).show();
    
                // 모든 탭 이미지를 off 이미지로 바꿈
                tabs.find("img").each(function(){
                    var img = $(this);
                    var new_src = img.attr("src").replace("_on", "_off");
                    img.attr("src", new_src);
                });
    
                // 클릭한 idx 해당하는 이미지만 on 이미지로 바꿈
                var img = tabs.eq(idx).find("img");
                var new_src = img.attr("src").replace("_off", "_on");
                img.attr("src", new_src);
            });
    
            // 첫번째 탭 클릭처리
            tabs.eq(0).click();
        });
    </script>
</body>
</html>



이미지 대신 class 로 간단하게 on/off 탭메뉴 만들기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>탭</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.3.1.min.js"></script>

    <style>
        .tabs a { background:#666; color:#fff; font-weight:bold; padding:10px; 
                  border:solid 2px #fff;  display:inline-block; width:200px; 
                  text-align: center; cursor: pointer;  }
        .tabs a:hover { background:#c00; }
        .tabs a.on { background:#c00; }
    </style>
</head>
<body>
    <div>
        <!-- 탭1 -->
        <div class="tabs">
            <a>첫번째메뉴</a>
            <a>두번째메뉴</a>
        </div>

        <div class="panel">첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">두번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <div>
        <!-- 탭2 -->
        <div class="tabs">
            <a>첫번째메뉴</a>
            <a>두번째메뉴</a>
            <a>세번째메뉴</a>
        </div>

        <div class="panel">첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">두번째 패널<br/><br/><br/><br/>끝</div>
        <div class="panel">세번째 패널<br/><br/><br/><br/>끝</div>
    </div>

    <script>
        $(".tabs").each(function(){
            var tabs = $(this).find("a");
            var panels = $(this).nextAll(".panel");
    
            tabs.on("click", function(){
                var clk = $(this);
                var idx = tabs.index(clk);
                
                // 아래쪽 탭 패널을 싹 안보이게 한다음 클릭한 순서에 해당하는 탭패널만 보여지게
                panels.hide();
                panels.eq(idx).show();
    
                // on 클래스를 싹 빼고 클릭한 a 에 on 클래스 추가
                tabs.removeClass("on");
                tabs.eq(idx).addClass("on");
            });
    
            tabs.eq(0).click();
        });
    </script>
</body>
</html>