jquery div 탭 메뉴

jquery div 탭 메뉴를 addClass, removeClass를 사용하여 만들어 본다.

jquery로 div 탭 메뉴를 만드는 방법은 다양하게 있지만 간단하게 만들어 본다.

//----------------------------------------------------------------------------------------------------------------------------------------------------------------------

// 메뉴를 클릭하면

function clickMenu(n){

   // 초기화. 메뉴가 많으면 for문 사용.

           $('#menu1').removeClass("on");

   $('#menu2').removeClass("on");

   $('#menu3').removeClass("on");

           $('#contents').html("");

$('#menu'+n).addClass("on");

$('#contents').html("클릭한 메뉴는 " + n + "번 입니다");

}

// 문서가 준비되면

$(document).ready(function(){

clickMenu(1);

//초기화. 메뉴가 많으면  다른 방법 사용. id^ 등등..

$("#menu1").on("click", function() {

clickMenu(1);

});

$("#menu2").on("click", function() {

clickMenu(2);

});

$("#menu3").on("click", function() {

clickMenu(3);

});

});

 

 <style>

    div {

      width: 60px;

      height: 25px;

  border: 1px solid black;

  cursor:pointer;

  float:left;

    }

.on{

background-color:yellow;

}

#contents{

  clear:both;

  cursor:default;

  width: 1000px;

      height: 500px;

  border: 1px solid black;

}

  </style>

 

   <div id="menu1">

menu1

  </div>

  

  <div id="menu2">

menu2

  </div>

  

  <div id="menu3">

menu3

  </div>

  <div id="contents"></div>

//----------------------------------------------------------------------------------------------------------------------------------------------------------------------

jquery div 탭 메뉴 끝 ~ !!