1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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 버전
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!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> |
