21. 7. 26.

제이쿼리(Jquery) 탭메뉴(Tab Menu)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tab 메뉴</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $(function () {
            $(".tabbtn").on("click", function () {
                var index = $(this).index();
                $(this).addClass("active").siblings().removeClass("active");
                $(".tablist").removeClass("active").eq(index).addClass("active");
            });
        });
    </script>
    <style>
        .tabnav{ width:100%; display:inline-block; float:left;}
        .tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
        .tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
        .tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
        .tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
        .tab > .active{ padding:0.5em; display:block; min-height:300px;}
    </style>
</head>
<body>
    <nav class="tabnav">
        <a class="tabbtn active">Tab1</a>
        <a class="tabbtn">Tab2</a>
        <a class="tabbtn">Tab3</a>
    </nav>
    <ul class="tab">
        <li class="tablist active">
            Tab1 Content
        </li>
        <li class="tablist">
            Tab2 Content
        </li>
        <li class="tablist">
            Tab3 Content
        </li>
    </ul>
</body>
</html>

Javascript 버전
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tab 메뉴</title>
    <script>
        window.onload = function () {
            var btns = document.querySelectorAll(".tabbtn");
            for (var i = 0; i < btns.length; i++) {
                btns[i].setAttribute("onclick", "btnClick(" + i + ");");
            }
        }
        function btnClick(index) {
            var tabbtn = document.getElementsByClassName("tabbtn");
            var tablist = document.getElementsByClassName("tablist");
            for (var i = 0; i < tabbtn.length; i++) {
                if (index == i) {
                    tabbtn[i].className = "tabbtn active";
                    tablist[i].className = "tablist active";
                } else {
                    tabbtn[i].className = "tabbtn";
                    tablist[i].className = "tablist";
                }
            }
        }
    </script>
    <style>
        .tabnav{ width:100%; display:inline-block; float:left;}
        .tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
        .tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
        .tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
        .tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
        .tab > .active{ padding:0.5em; display:block; min-height:300px;}
    </style>
</head>
<body>
    <nav class="tabnav">
        <a class="tabbtn active">Tab1</a>
        <a class="tabbtn">Tab2</a>
        <a class="tabbtn">Tab3</a>
    </nav>
    <ul class="tab">
        <li class="tablist active">
            Tab1 Content
        </li>
        <li class="tablist">
            Tab2 Content
        </li>
        <li class="tablist">
            Tab3 Content
        </li>
    </ul>
</body>
</html>

댓글 없음:

댓글 쓰기