Tab Menu

by jay0727

HTML

<div class="container">
  <!-- 탭 메뉴 상단 시작 -->
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">메뉴 1</li>
    <li class="tab-link" data-tab="tab-2">메뉴 2</li>
    <li class="tab-link" data-tab="tab-3">메뉴 3</li>
  </ul>
  <!-- 탭 메뉴 상단 끝 -->
  <!-- 탭 메뉴 내용 시작 -->
  <div id="tab-1" class="tab-content current">
    <h1>탭 메뉴 1 내용입니다.</h1>
    <p>
      모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 공공필요에 의한
      재산권의 수용·사용 또는 제한 및 그에 대한 보상은 법률로써 하되, 정당한
      보상을 지급하여야 한다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지
      아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타
      불리한 처분을 받지 아니한다. 대통령이 임시회의 집회를 요구할 때에는 기간과
      집회요구의 이유를 명시하여야 한다. 대통령은 제1항과 제2항의 처분 또는
      명령을 한 때에는 지체없이 국회에 보고하여 그 승인을 얻어야 한다. 대통령은
      국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수
      없다.
    </p>

    <p>
      공무원은 국민전체에 대한 봉사자이며, 국민에 대하여 책임을 진다. 공개하지
      아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다. 형사피의자
      또는 형사피고인으로서 구금되었던 자가 법률이 정하는 불기소처분을 받거나
      무죄판결을 받은 때에는 법률이 정하는 바에 의하여 국가에 정당한 보상을
      청구할 수 있다. 헌법개정안은 국회가 의결한 후 30일 이내에 국민투표에 붙여
      국회의원선거권자 과반수의 투표와 투표자 과반수의 찬성을 얻어야 한다.
      헌법개정안이 제2항의 찬성을 얻은 때에는 헌법개정은 확정되며, 대통령은 즉시
      이를 공포하여야 한다. 대통령은 국민의 보통·평등·직접·비밀선거에 의하여
      선출한다.
    </p>
  </div>
  <div id="tab-2" class="tab-content">
    <h1>탭 메뉴 2 내용입니다.</h1>
    <p>
      근로자는 근로조건의 향상을 위하여 자주적인 단결권·단체교섭권 및
      단체행동권을 가진다. 국가는 청원에 대하여 심사할 의무를 진다. 이 헌법공포
      당시의 국회의원의 임기는 제1항에 의한 국회의 최초의 집회일 전일까지로
      한다. 모든 국민은 직업선택의 자유를 가진다. 모든 국민은 언론·출판의 자유와
      집회·결사의 자유를 가진다. 저작자·발명가·과학기술자와 예술가의 권리는
      법률로써 보호한다. 대통령은 법률안의 일부에 대하여 또는 법률안을 수정하여
      재의를 요구할 수 없다. 국회는 정부의 동의없이 정부가 제출한 지출예산
      각항의 금액을 증가하거나 새 비목을 설치할 수 없다. 이 헌법시행 당시의
      법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.
    </p>

    <p>
      정기회의 회기는 100일을, 임시회의 회기는 30일을 초과할 수 없다. 훈장등의
      영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다.
      모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을
      권리를 가진다. 모든 국민은 양심의 자유를 가진다. 법관은 탄핵 또는 금고
      이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지
      아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다. 이 헌법시행 당시에
      이 헌법에...

CSS

ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul.tabs li{
  display: inline-block;
	background: #898989;
	color: white;
	padding: 10px 15px;
	cursor: pointer;
}

ul.tabs li.current{
	background: #e0e0e0;
	color: #222;
}

.tab-content{
  display: none;
	background: #e0e0e0;
	padding: 12px;
}

.tab-content.current{
	display: inherit;
}

JavaScript

//선택자를 통해 tabs 메뉴를 클릭 이벤트를 지정해줍니다.
$('ul.tabs li').click(function(){
  var tab_id = $(this).attr('data-tab');
  
  //선택 되있던 탭의 current css를 제거합니다.
  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');
  
	////선택된 탭에 current class를 삽입해줍니다.
  $(this).addClass('current');
  $("#" + tab_id).addClass('current');
});