jQuery 로 탭 만들어 보기
Javascript 예제 2018. 10. 12. 16:50
예제 소스 다운로드
tab.zipon, off 이미지로 탭 만들기 (요즘은 거의 이렇게 안 쓰지만 불가피하게 쓸 경우가 있는것 같아서..)
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!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 탭메뉴 만들기
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 55 56 57 58 59 60 61 62 63 64 65 | <!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> |
'Javascript 예제' 카테고리의 다른 글
| Javascript 로 초성검색하기 (0) | 2018.06.26 |
|---|---|
| jQuery 로 탭메뉴를 맹글어 보아요~ (8) | 2014.10.15 |
| 네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 (0) | 2014.04.29 |
| jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3) | 2014.04.10 |
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
