[js/jQuery] 탭메뉴 구현하기

 

javascript/jQuery를 이용한

탭메뉴를 구현하기

 

홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다.
javascript/jQuery를 이용하여 구현하겠습니다.

 

구현방법:

· 첫번째 탭제목에 컬러가 들어가있고 탭박스가 오픈된 상태

· 다른 탭을 클릭시 이전 탭제목 컬러 없어지고, 해당 탭제목의 컬러가 들어감
· 동시에 이전 탭 박스는 감추고, 해당 탭의 박스가 오픈

· addclass, removeclass, hide, show 메소드 이용

 

아래의 html, css, javascipt 소스를 그대로 넣으시면 됩니다.

html

<div class="container">
  <ul class="tab_title">
    <li class="on">tab1</li>
    <li>tab2</li>
    <li>tab3</li>
  </ul>
  <div class="tab_cont">
    <div class="on">
      tab1_content
    </div>
    <div>
      tab2_content
    </div>
    <div>
      tab3_content
    </div>
  </div>
</div>

 

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가 안나올 경우 입니다.
이럴 때에는 아래와 같이 임의의 변수로 한번더 감싸줍니다.

var $tablink = $(".tabTitle li").click(function() {
			var idx = $tablink.index(this);
			$(".tabTitle li").removeClass("on");
			$(".tabTitle li").eq(idx).addClass("on");
			$(".tabCont > div").hide();
			$(".tabCont > div").eq(idx).show();
		})