Update: 2018.04.17 선택자 옵션 추가

웹에서 많이 사용하는 스크립트나 애니메이션 중에 탭 메뉴도 많이 사용할 것입니다. 매번 할 때마다 소스 짜기엔 애매하고 또 다른 어떤 플로그인 쓰려고 무겁다고 느껴서 필자가 많이 쓰는 것으로 만들어봤습니다.
매우 심플하게 만들었으며, 많은 기능도 넣지 않았습니다.
자세한 내용은 아래 내용과 같습니다.

사용하는 방법

jQuery ver 1.7 ++

HTML

<head>영역에 아래 소스를 넣으시면 됩니다.
또 다른 방법은 <body>영역 제일 하단에 넣어도 상관이 없습니다.
필자는 <script>는 body 아래 넣는 것을 선호합니다.

<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="tabMenus.min.js"></script>
<head>
<body>
	<div class="tab-menu">
		<ul class="ui_tabs_menu">
			<li><a href="#tabmenu-1">탭 메뉴1</a></li>
			<li><a href="#tabmenu-2">탭 메뉴2</a></li>
			<li><a href="#tabmenu-3">탭 메뉴3</a></li>
		</ul>
		<div class="ui_tabs_contents" id="tabmenu1">Test 1</div>
		<div class="ui_tabs_contents" id="tabmenu2">Test 2</div>
		<div class="ui_tabs_contents" id="tabmenu3">Test 3</div>
	</div>
</body>

<body> 넣기

body 하단에 넣는 것을 선호하는 이유는 스크립트 오류로 인해서 페이지가 열리지 않는 것을 방지하기 위함이고,
스크립트로 인해서 페이지 로드가 걸리는 것을 줄이기 위해서입니다.

<body>
	<div id="wrap">
		<div class="tab-menu">
			<ul class="ui_tabs_menu">
				<li><a href="#tabmenu-1">탭 메뉴1</a></li>
				<li><a href="#tabmenu-2">탭 메뉴2</a></li>
				<li><a href="#tabmenu-3">탭 메뉴3</a></li>
			</ul>
			<div class="ui_tabs_contents" id="tabmenu1">Test 1</div>
			<div class="ui_tabs_contents" id="tabmenu2">Test 2</div>
			<div class="ui_tabs_contents" id="tabmenu3">Test 3</div>
		</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="tabMenus.min.js"></script>
</body>

JavaScript

$(document).ready(function(){
	$('.tab-menu').tabMenus();
});

예제소스

기본

HTML

<div class="tab-menu" id="tabMenu1">
	<ul class="ui_tabs_menu">
		<li><a href="#tabmenu-1">탭 메뉴1</a></li>
		<li><a href="#tabmenu-2">탭 메뉴2</a></li>
		<li><a href="#tabmenu-3">탭 메뉴3</a></li>
	</ul>
	<div class="ui_tabs_contents" id="tabmenu-1">Test 1</div>
	<div class="ui_tabs_contents" id="tabmenu-2">Test 2</div>
	<div class="ui_tabs_contents" id="tabmenu-3">Test 3</div>
</div>

JavaScript

$(document).ready(function(){
	$('#tabMenu1').tabMenus();
});

예제 적용

Test 1
Test 2
Test 3
Test 4

원하는 탭 메뉴 먼저 활성화

HTML

<div class="tab-menu" id="tabMenu2">
	<ul class="ui_tabs_menu">
		<li><a href="#tabmenu2-1">탭 메뉴2-1</a></li>
		<li><a href="#tabmenu2-2">탭 메뉴2-2</a></li>
		<li><a href="#tabmenu2-3">탭 메뉴2-3</a></li>
		<li><a href="#tabmenu2-4">탭 메뉴2-4</a></li>
	</ul>
	<div class="ui_tabs_contents" id="tabmenu2-1">Test 2-1</div>
	<div class="ui_tabs_contents" id="tabmenu2-2">Test 2-2</div>
	<div class="ui_tabs_contents" id="tabmenu2-3">Test 2-3</div>
	<div class="ui_tabs_contents" id="tabmenu2-3">Test 2-4</div>
</div>

JavaScript

$(document).ready(function(){
	$('#tabMenu2').tabMenus({
		startItem: 2
	});
});

2번째 탭 활성화 예제

Test 2-1
Test 2-2
Test 2-3
Test 2-4

3번째 탭 활성화 예제

Test 2-1-1
Test 2-1-2
Test 2-1-3
Test 2-1-4

마우스 오버 이벤트

HTML

<div class="tab-menu" id="tabMenu3">
	<ul class="ui_tabs_menu">
		<li><a href="#tabmenu3-1">탭 메뉴3-1</a></li>
		<li><a href="#tabmenu3-2">탭 메뉴3-2</a></li>
		<li><a href="#tabmenu3-3">탭 메뉴3-3</a></li>
		<li><a href="#tabmenu3-4">탭 메뉴3-4</a></li>
	</ul>
	<div class="ui_tabs_contents" id="tabmenu3-1">Test 3-1</div>
	<div class="ui_tabs_contents" id="tabmenu3-2">Test 3-2</div>
	<div class="ui_tabs_contents" id="tabmenu3-3">Test 3-3</div>
	<div class="ui_tabs_contents" id="tabmenu3-3">Test 3-4</div>
</div>

JavaScript

$(document).ready(function(){
	$('#tabMenu3').tabMenus({
		event: 'mouseover'
	});
});

예제적용

Test 3-1
Test 3-2
Test 3-3
Test 3-4

옵션

startItem: 1, //처음 시작하는 탭
tabMenuClass: 'ui_tabs_menu', // 탭 메뉴 클래스
tabContsClass: 'ui_tabs_contents', //탭 컨텐츠 클래스
activeClass: 'is-current', // 탭 메뉴 활성화 클래스
childSelector: '> a', // 선택자
event: 'click' // 탭 메뉴 이벤트

지원 브라우저

  • Internet Explorer 7+
  • Google Chrome
  • Mozilla Firefox 3+
  • Opera 10+

이상입니다. ^^ 이슈가 있으면 댓글로 문의 주시면 됩니다.
Github 주소: https://github.com/buppagi/jQuery-tabMenu