# 13.탭

<div class="tab-wrapper">
	<ul class="tab-menu">
		<li><a href="#tabs-1" class="active">리미</a></li>
		<li><a href="#tabs-2">감자</a></li>
		<li><a href="#tabs-3">치킨</a></li>
	</ul>
	<div class="tab-content">
		<div id="tabs-1" class="active">
			<h2>리미</h2>
			<p>I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2 반은 양념 치킨 반은 후라이드 치킨 무는 많이 줘요 아줌마 부위는 날개는 세게 다리는 네게 목은 빼주세요 아줌마 고도비만 치킨 알이 꽉 찬 치킨 두 마리 같은 걸로 아줌마 구이는 날개는 미듐 가슴도 미듐 다린 웰던으로 아줌마</p>
		</div>
		<div id="tabs-2">
			<h2>감자</h2>
			<p>Edge 있게 물티슈, (아줌마) 콜란 서비스 (아줌마) 할인카드... 되죠? (아줌마) 어저께도 거기 (아줌마) 시켰는데 쿠폰 두개 (아줌마) 감사하죠 콜라는 다이어트 중이니까 다이어트 콜라 염통튀김도 몇 개 되요? 원 플러스 원 곱빼기도 되요? 옆 테이블 남는 거 싸가도 되요? 이거 다 타 매장쿠폰 계산 되죠? I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2</p>
		</div>
		<div id="tabs-3">
			<h2>I like 치킨 (나는 반반)</h2>
			<p>후라이드 좋다던 첫사랑 그녀 근데 네 옷에 묻어있던 양념 1000원 더 비싸서 양념을 못 사준 내 탓 이 악물고서 나도 성공을 했다 붉은 빛깔 그녀의 입술 같아서 쿠킹호일도 다 핥아먹어 날 떠난 이윤 지독한 가난이라서 양념 밖에는 난 안 먹어 후라이드 좋아한다고 말해야 했지 어떤 날엔 화내야 했지 (오빠가 돈이 어디 있다고 양념을 사줘) 우린 데이트하면 후라이드 우리가 매일 먹고 또 먹던 후라이드 근데 오빠 나도 속물 인가봐 양념이라면 눈이 돌아갔지 양념이 오빠의 피 같아 지금은 후라이드 밖에 못 삼켜 난 양념치킨이 더 좋아 양념을 먹어봐 넌 건강해지고 양념을 먹어봐 넌 머리 좋아져 양념을 먹어봐 넌 웃을 수 있고 양념을 먹어봐 넌 시험 합격해</p>
		</div>
	</div>
</div>
<div class="tab-wrapper">
	<ul class="tab-menu">
		<li><a href="#tabs-21" class="active">리미</a></li>
		<li><a href="#tabs-22">감자</a></li>
		<li><a href="#tabs-23">치킨</a></li>
	</ul>
	<div class="tab-content">
		<div id="tabs-21" class="active">
			<h2>리미</h2>
			<p>I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2 반은 양념 치킨 반은 후라이드 치킨 무는 많이 줘요 아줌마 부위는 날개는 세게 다리는 네게 목은 빼주세요 아줌마 고도비만 치킨 알이 꽉 찬 치킨 두 마리 같은 걸로 아줌마 구이는 날개는 미듐 가슴도 미듐 다린 웰던으로 아줌마</p>
		</div>
		<div id="tabs-22">
			<h2>감자</h2>
			<p>Edge 있게 물티슈, (아줌마) 콜란 서비스 (아줌마) 할인카드... 되죠? (아줌마) 어저께도 거기 (아줌마) 시켰는데 쿠폰 두개 (아줌마) 감사하죠 콜라는 다이어트 중이니까 다이어트 콜라 염통튀김도 몇 개 되요? 원 플러스 원 곱빼기도 되요? 옆 테이블 남는 거 싸가도 되요? 이거 다 타 매장쿠폰 계산 되죠? I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2</p>
		</div>
		<div id="tabs-23">
			<h2>I like 치킨 (나는 반반)</h2>
			<p>후라이드 좋다던 첫사랑 그녀 근데 네 옷에 묻어있던 양념 1000원 더 비싸서 양념을 못 사준 내 탓 이 악물고서 나도 성공을 했다 붉은 빛깔 그녀의 입술 같아서 쿠킹호일도 다 핥아먹어 날 떠난 이윤 지독한 가난이라서 양념 밖에는 난 안 먹어 후라이드 좋아한다고 말해야 했지 어떤 날엔 화내야 했지 (오빠가 돈이 어디 있다고 양념을 사줘) 우린 데이트하면 후라이드 우리가 매일 먹고 또 먹던 후라이드 근데 오빠 나도 속물 인가봐 양념이라면 눈이 돌아갔지 양념이 오빠의 피 같아 지금은 후라이드 밖에 못 삼켜 난 양념치킨이 더 좋아 양념을 먹어봐 넌 건강해지고 양념을 먹어봐 넌 머리 좋아져 양념을 먹어봐 넌 웃을 수 있고 양념을 먹어봐 넌 시험 합격해</p>
		</div>
	</div>
</div>

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialised;
}

.tab-wrapper {
	width: 960px;
	margin: auto;
}
.tab-menu {
	padding-left: 0;
}
.tab-menu li {
	float: left;
	list-style: none;
	background: #ebebeb;
	margin-right: 10px;
}
.tab-menu:after {
	content: '';
	display: block;
	clear: both;
}
.tab-menu li a {
	color: #999;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 27px;
	text-decoration: none;
	display: block;
	padding: 0 20px;
}
.tab-menu li a.active {
	background: #000;
	color: #fff;
}
.tab-content {
	position: relative;
	min-height: 300px;
}
.tab-content > div {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	background: #e7b36e27 url(http://qwerew.cafe24.com/example/javascript/chicken.png) no-repeat 100px top;
	background-size: 40px;
	padding: 1em;
}

.tab-content > div.active {
	display: block;
}

const tabWrapper = $('.tab-wrapper');

//https://api.jquery.com/jquery.each/

tabWrapper.each(() => {
	//tabWrapper이 여러개 있을경우 each 문을 작성해야 한다
	let currentEl = $(this);
	const targetLink = currentEl.find('.tab-menu a');
	const tabContent = currentEl.find('.tab-content > div');

	targetLink.click(function (e) {
		e.preventDefault();
		let tg = $(this);
		let currentLink = tg.attr('href');
		console.log(currentLink);
		targetLink.removeClass('active');
		tg.addClass('active');
		tabContent.hide();
		$(currentLink).show();
	});
});
$('#tabs-1').css('display', 'block');

const tabWrapper = document.querySelectorAll('.tab-wrapper');
function singleTab() {
	const tabContent = document.querySelectorAll('.tab-content>div');
	const targetLink = document.querySelectorAll('.tab-menu a');
	for (let i = 0; i < targetLink.length; i++) {
		targetLink[i].addEventListener('click', (e) => {
			e.preventDefault();

			for (let j = 0; j < targetLink.length; j++) {
				targetLink[j].classList.remove('active');
				e.target.classList.add('active');
			}
			let orgTarget = e.target.getAttribute('href');
			console.log(orgTarget);
			for (let x = 0; x < tabContent.length; x++) {
				tabContent[x].style.display = 'none';
			}
			document.querySelector(orgTarget).style.display = 'block';
		});
		document.querySelector('#tabs-1').style.display = 'block';
	}
}

for (const el of tabWrapper) {
	const targetLink = el.querySelectorAll('ul.tab-menu a');
	let tabContent = el.querySelectorAll('.tab-content > div');
	targetLink.forEach(function (el) {
		el.addEventListener('click', function (e) {
			e.preventDefault();
			let tg = this;
			let currentLink = tg.getAttribute('href');
			controlClass(targetLink);
			controlClass(tabContent);
			document.querySelector(currentLink).classList.add('active');
			tg.classList.add('active');
		});
	});
}

function controlClass(old) {
	let elements = Array.from(old);
	elements.forEach(function (elem) {
		elem.classList.remove('active');
	});
}