jQuery 로 탭 만들어 보기
Javascript 예제 2018. 10. 12. 16:50
예제 소스 다운로드
tab.zipon, 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>
'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 |
