22.05.10 tabmenu (onclick), (index)

탭메뉴 두번째 공부..!

클래스명 없이 순서매칭으로만 탭메뉴 구현하기!

<div class="wrap">
	<ul class="tab_menu">
		<li class="on"><a href="">학교</a></li>
		<li><a href="">공원</a></li>
		<li><a href="">놀이터</a></li>
		<li><a href="">집안</a></li>
		<li><a href="">사무실</a></li>
	</ul>
	<div class="tab_content">
		<div class="on">학교 내용</div>
		<div>공원 내용</div>
		<div>놀이터 내용</div>
		<div>집안 내용</div>
		<div>사무실 내용</div>
	</div>
</div>

for문으로 전체를 반복해주고,
li 클릭시 함수를 실행해준뒤,
li들과 div에서 forEach문으로 반복해줘 클래스를 제거해준다.
그리고 다시 li들과 div를 전체 for문에서 받아온 i 인자값을 이용하여
클래스를 붙여준다.

var tabMenu = document.querySelector(".tab_menu");
var tabMenuLis = tabMenu.querySelectorAll("li");
var tabContentDivs = document.querySelectorAll(".tab_content > div");
for(let i = 0; i<tabMenuLis.length; i++){

	tabMenuLis[i].addEventListener("click", clickHandler)
	function clickHandler(e){
		e.preventDefault();

		tabMenuLis.forEach(item=>{
			item.classList.remove('on');
		})
		tabContentDivs.forEach(item=>{
			item.classList.remove('on');
		})
		tabMenuLis[i].classList.add('on')
		tabContentDivs[i].classList.add('on')

	}
}

---

두번째 방법..!
addEventListener대신 onclick 이용해보기

위에방법과 동일하지만,
따로 함수를 만들지않고 onclick 기능에 바로 함수를 적용하여
진행하는 방법이다. addEventListener가 나오기전에는
이방법을 썻다고 한다.

for(let i = 0; i<tabMenuLis.length; i++){

tabMenuLis[i].onclick = (e) => {
e.preventDefault();

tabMenuLis.forEach(item=>{
	item.classList.remove('on');
})
tabContentDivs.forEach(item=>{
	item.classList.remove('on');
})
tabMenuLis[i].classList.add('on');
tabContentDivs[i].classList.add('on');
}
}

---

세번째 방법..!
index를 사용하여 탭메뉴 구현해보기

for문을 돌려 tabMenuLis[ i ]의 인덱스값을 i로 설정해준다.

그리고 마지막부분에 변수 index안에 ev.target.parentNode.index를 넣어주고,
tabMenuLis[ ] 안에 변수index를 삽입해준뒤 클래스 on을 붙여준다.

// 리스너설치
for(var i = 0; i<tabMenuLis.length; i++){
tabMenuLis[i].index = i;


tabMenu.addEventListener("click", 할일);

function 할일(ev){
	ev.preventDefault();

	// 모두지우기
		tabMenuLis.forEach(item =>{
			item.classList.remove('on');
		})
		tabContentDivs.forEach(item=>{
			item.classList.remove('on');
		})

		//현재탭에 on주기
		const index = ev.target.parentNode.index;
		tabMenuLis[index].classList.add('on')
		tabContentDivs[index].classList.add('on')

		console.log(index);

}
}

---

index에 대해서 좀더 알아보자

	<div class="boxList">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
   	 <p>000</p>

div들을 변수로 잡고있는 box를 forEach로 돌려서
첫번째인수는 element, 두번째 인수는 index 값을 받는다.

첫번째인수 item을 클릭시 ddd 함수가 실행되고 ,
함수내용은 input변수라는 p태그에 index 번호를 넣게된다.

const boxs = document.querySelectorAll('.boxList > div');
const input = document.querySelector('p');

boxs.forEach((item,index)=>{

function ddd (e){
input.textContent += index
}

item.addEventListener('click',ddd)
})