Jquery 탭 메뉴 만들기

Jquery 탭 메뉴 만들기

 

 

1. 탭의 기본 구조

- tab1, tab2 는 활성화되기 위한 클래스를 따로 줘야한다. ex) ‘on’, ‘active’, ‘current’ ...

- tab 에 a를 주지 않았으면 cursor: pointer; 속성을 부여해준다.

- tab의 ‘on’ 클래스에는 활성화되었을 때 색상을 따로 지정.

 

- contents 에도 활성화되기 위한 클래스를 지정해준다. ex) ‘on’, ‘active’, ‘current’ ...

- contents 는 tab 이 on 이 아닐 때에는 보이지 않게 하기 위해서 display: none;을 줘야한다.

- contents의 ‘on’ 클래스에 display: block; 과 너비, 높이 등등 보여질 부분의 속성을 지정.

tab1	tab2
contents

 

 

2. 탭 메뉴 만들기 : 같은 타이틀과 콘텐츠 부분이 같은 부모에 있는 형태

<div class="wrap">
	<ul class="tab_list">
		<li class="on">
			<a href="#">공지사항</a>
			<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, recusandae dolor odit labore voluptate rerum facere autem magnam ab molestiae officia qui voluptas reprehenderit saepe iure obcaecati inventore cumque vero?</p>
		</li>
		<li>
			<a href="#">갤러리</a>
			<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit voluptates fuga in quae exercitationem tempore aliquid modi eos maxime odio, sequi nulla harum consequatur impedit similique dolore explicabo consequuntur illum!</p>
		</li>
	</ul>
</div>

 

.wrap{
	width: 100%;
	height: 100%;
}

.tab_list{
	margin: 20px auto;
	width: 500px;
	height: 200px;
	position: relative;
}

.tab_list li{
	float: left;
	width: 30%;
}

.tab_list li a{
	text-align: center;
	display: block;
	padding: 10px;
	font-weight: bold;
}

.tab_list li p{
	display: none;
	padding: 20px;
	box-sizing: border-box;
	line-height: 1.5;
	border: 1px solid #eee;
	border-top: none;
}

.tab_list li.on a{
	background-color: pink;
}

.tab_list li.on p{
	background-color: pink;
	color: white;
	display: block;
	position: absolute;
	left: 0;
	width: 500px;
	height: 160px;
}

- ul 의 li 의 너비를 보여질 탭의 너비보다는 작게 설정( ex. 30%, 100px ... )

- ul 의 li 은 옆으로 쌓이게 하여 탭의 제목(tab_list li a)이 가로로 정렬된 형태로 만들어준다.

ul li 에 float left 로 옆으로 쌓이게 만든 모습

 

- 콘텐츠 부분(ul li p)은 display: none; 으로 일단은 보이지 않게 만들어줌

- li에 on 이라는 클래스가 주어졌을 때, 화면에 보이게 만들어준다.

 

.tab_list li.on a

.tab_list li.on p

→ li가 on 클래스를 가지고 있을 때 li a 와 li p 에 색상을 지정해준다.

 

tab_list li.on p에 포지션 left 0 을 주지 않았을 경우

- tab_list li.on p에 포지션을 줘서 한곳에 보이게 만들어준 후 tab_list 를 기준으로 left : 0; 을 줘서 콘텐츠 부분이 왼쪽을 기준으로 정렬되게 만들어준다.

- left: 0; 값을 주지 않았을 경우 위의 사진과 같이 갤러리 탭의 콘텐츠 부분이 타이틀을 기준으로 정렬되기 때문에 옆으로 밀려나 있는 것 같이 보이게 된다.

 

tab_list li.on p에 포지션 left 0 을 준 경우

- tab_list 을 기준으로 모든 콘텐츠 박스 (tab_list li p) 가 왼쪽으로 정렬되었다.

 

 

 

$('.tab_list li').click(function(){
	$(this).addClass('on').siblings().removeClass('on');
});

- 그 다음 자바스크립트 한줄만 넣어주면 된다.

- tab_list li를 클릭하면 이 클릭한 것(this)에 on 이라는 클래스를 주고, li 의 형제들(두번째 탭)은 on 이라는 클래스를 제거해준다.

 

 

 

 

3. 탭 메뉴 만들기 : 타이틀과 콘텐츠 부분을 분리

<div class="wrap">
	<div class="tab">
		<ul class="tab_tit_list"> /* 타이틀 */
			<li class="on">
				<a href="#">
					공지사항						
				</a>
			</li>
			<li>
				<a href="#">
					갤러리
				</a>
			</li>
		</ul>
        
		<ul class="tab_content_list"> /* 콘텐츠 */
			<li class="active">				
				<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, recusandae dolor odit labore voluptate rerum facere autem magnam ab molestiae officia qui voluptas reprehenderit saepe iure obcaecati inventore cumque vero?</p>
			</li>
			<li>				
				<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit voluptates fuga in quae exercitationem tempore aliquid modi eos maxime odio, sequi nulla harum consequatur impedit similique dolore explicabo consequuntur illum!</p>
			</li>
		</ul>
	</div>
</div>

 

.wrap{
	width: 100%;
	height: 100%;
}
		
.tab{
	margin: 20px auto;
	width: 500px;
	height: 200px;
	position: relative;
	border: 1px solid #eee;
}

.tab_tit_list li a{
	width: 150px;
	height: 50px;
	line-height: 50px;
	float: left;
	text-align: center;
	font-weight: bold;
}

.tab_content_list li{
	display: block;
	padding: 20px;
	box-sizing: border-box;
	width: 500px;
	height: 200px;
	position: absolute;
	top: 30px;
	display: none;
}

.tab_content_list li p{
	padding: 20px;
	box-sizing: border-box;
	line-height: 1.5;
}

.tab_tit_list li.on a{
	background-color: pink;
}

.tab_content_list li.active{
	display: block;
}

.tab_list li.on p{
	background-color: pink;
	color: white;
	display: block;
	position: absolute;
	left: 0;
	width: 500px;
	height: 160px;
}

 

$('.tab_tit_list li').click(function(){
	$(this).addClass('on').siblings().removeClass('on');
	
	var index = $(this).index()
	$(this).parent().next().children().eq(index).addClass('active').siblings().removeClass('active');
});

- index 라는 변수에 tab_tit_list li 의 인덱스가 몇번째인지 저장해서

- tab_tit_list li 의 부모(tab_tit_list)의 다음 요소(tab_content_list)의 자식(tab_content_list li)에 active 라는 클래스를 주고 li 의 형제들(선택하지 않은 탭의 콘텐츠)에는 active 라는 클래스를 제거해준다.