22.05.10 substr()메서드

substr()

substr() 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다.

const str = 'Mozilla';

console.log(str.substr(1, 2));
// expected output: "oz"

console.log(str.substr(2));
// expected output: "zilla"

예제 1 )

탭메뉴에서 substr 메서드가 쓰이는 경우를 알아보자.

탭메뉴와 탭컨텐츠가 이름이 비슷하지만 앞의 두글자만 다르다.
이경우 앞의두글자의 문자열을 이용하여 탭메뉴를 인식해 짝지어줄수있다.

<div class="wrap">
	<ul class="tab_menu">
		<li class="t_school on"><a href="">학교</a></li>
		<li class="t_park"><a href="">공원</a></li>
		<li class="t_play"><a href="">놀이터</a></li>
		<li class="t_home"><a href="">집안</a></li>
		<li class="t_office"><a href="">사무실</a></li>
	</ul>
	<div class="tab_content">
		<div class="c_school on">학교 내용</div>
		<div class="c_park">공원 내용</div>
		<div class="c_play">놀이터 내용</div>
		<div class="c_home">집안 내용</div>
		<div class="c_office">사무실 내용</div>
	</div>
</div>

먼저, 탭메뉴를 클릭하면 for문으로 탭메뉴와 컨텐츠의 on 클래스를
모두 삭제해준다.

두번째로, 아래구문을 보자.
.tab_content안에 .c로 시작하고, const activeLi = e.target.parentNode;
즉 부모가 클릭한것의 className을 가져와서 앞의 두글자를 지운것에
클래스 on을 붙여라! 이렇게 해석될수있다.

그리고 클릭한 탭메뉴에도 on클래스를 붙여주면

서로 짝지어 .on 이 붙게된다.

document.querySelector(.tab_content > .c_${activeLi.className.substr(2)})
.classList.add("on");

var tabMenu = document.querySelector(".tab_menu");
var tabMenuLis = tabMenu.querySelectorAll("li");
var tabContentDivs = document.querySelectorAll(".tab_content > div");


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

function 할일(e){
e.preventDefault();
const activeLi = e.target.parentNode;


//on 모두 지우기
for(let i = 0; i<tabMenuLis.length; i++){
	tabMenuLis[i].classList.remove('on');
	tabContentDivs[i].classList.remove('on');
}
document.querySelector(`.tab_content > .c_${activeLi.className.substr(2)}`)
.classList.add("on");
activeLi.classList.add("on");
}