22.05.16 javascript 실시간강의 내용

데이터를 json 으로 패치하여

컬러부분을 json 에서 꺼내와 뿌려주는 내용입니다.
나머지는 기존 탭메뉴 구현방식과 동일합니다.

// 데이터 준비
fetch('https://eulsoo.github.io/tab_5_data.json')
.then(res=> res.json())
.then(res=>{할일(res)});

function 할일(obj){
	console.log(obj)
	// 노드 준비
	const tabMenu = document.querySelector(".tab_menu");
	const tabMenuLis = tabMenu.querySelectorAll("li");
	const tabContentDivs = document.querySelectorAll('.tab_content > div');
	// 확인

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

		//처음시작 할때 색주기
		if(tabMenuLis[i].classList.contains('on')){
			tabMenuLis[i].firstChild.style.backgroundColor = obj.tabItems[i].itemColor
			tabContentDivs[i].style.backgroundColor = obj.tabItems[i].itemColor
		}
		// 클릭할때마다 색주기
		tabMenuLis[i].onclick =(ev) => {
			ev.preventDefault();

			for(let i = 0; i<tabMenuLis.length; i++){
			tabMenuLis[i].classList.remove('on');
			tabContentDivs[i].classList.remove('on');
			tabMenuLis[i].firstChild.style.backgroundColor = "";
			tabContentDivs[i].style.backgroundColor = "";
			}
			tabMenuLis[i].classList.add('on');
			tabContentDivs[i].classList.add('on');
			tabMenuLis[i].firstChild.style.backgroundColor = obj.tabItems[i].itemColor
			tabContentDivs[i].style.backgroundColor = obj.tabItems[i].itemColor
		}
	}
}