javascript/jQuery를 이용한
탭메뉴를 구현하기
홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다.
javascript/jQuery를 이용하여 구현하겠습니다.
구현방법:
· 첫번째 탭제목에 컬러가 들어가있고 탭박스가 오픈된 상태
· 다른 탭을 클릭시 이전 탭제목 컬러 없어지고, 해당 탭제목의 컬러가 들어감
· 동시에 이전 탭 박스는 감추고, 해당 탭의 박스가 오픈
· addclass, removeclass, hide, show 메소드 이용
아래의 html, css, javascipt 소스를 그대로 넣으시면 됩니다.
html
css
.container { width: 500px; margin: 20px auto; } .tab_title li { list-style: none; float: left; width: 100px; padding: 10px 15px; cursor: pointer; text-align: center; border: 1px solid #bebebe; } .tab_title li.on { background-color: #ffb715; font-weight: bold; } .tab_cont { clear: both; border: 1px solid #dedede; height: 130px; background-color: #cecece; } .tab_cont div { display: none; text-align: center; } .tab_cont div.on { display: block; }javascript, jQuery
$(document).ready(function() { $(".tab_title li").click(function() { var idx = $(this).index(); $(".tab_title li").removeClass("on"); $(".tab_title li").eq(idx).addClass("on"); $(".tab_cont > div").hide(); $(".tab_cont > div").eq(idx).show(); }) });화면 보기(Result 클릭)
여기서 잠깐!
var idx = $(this).index(); 가 작동을 안할 경우가 있습니다.
index를 잡지 못하여 변수 idx가 안나올 경우
입니다.
이럴 때에는 아래와 같이 임의의 변수로 한번더 감싸줍니다.