[javaScript/실습] 링크 없이 탭 이동하기

'탭이동' classList 기능 연습

 

 

---

       실습 목표 

시작화면 : 기본 페이지로 시작
탭 클릭 : '팀 소개' 혹은 '멤버 소개' 탭 클릭 시 해당 콘텐츠만 보이게 하기
기능 : 해당 탭과 관련있는 콘텐츠만 노출, 외는 다 숨기기

 

자바스크립트는 처음 써봐서 선택자를 사용하는 것부터 살짝 시행착오가 있었지만, 재밌었다!

코딩테스트 하면서 썼던 함수들 실제로 응용해봐서 더 좋았음

 

 

---

       완성된 코딩 

//변수
const start = document.querySelector("#start-page");
const content1 = document.querySelector("#team-page");
const content2 = document.querySelector("#member-page");

const btn1 = document.querySelector(".li-1");
const btn2 = document.querySelector(".li-2");


// 시작
window.onload = function () {
  content1.classList.add("switch");
  content2.classList.add("switch");
  modal1.classList.add("switch");
  modal2.classList.add("switch");
  // start.classList.add("switch");
};


// 팀 btn
btn1.addEventListener("click", () => {
  if (
    content2.classList.contains("switch") &&
    start.classList.contains("switch")
  ) {
  } else {
    title.classList.add("switch");
    content2.classList.add("switch");
    content1.classList.remove("switch");
  }
});

// 멤버 btn
btn2.addEventListener("click", () => {
  if (
    content1.classList.contains("switch") &&
    title.classList.contains("switch")
  ) {
  } else {
    start.classList.add("switch");
    content1.classList.add("switch");
    content2.classList.remove("switch");
  }
});

 

 

 

---

       과정💦 

처음 시작했을 때, 그리고 버튼을 눌렀을 때 원하는 요소들만 뜨게 하는 게 목적이었다.

그래서 먼저 CSS 파일에 .hide 태그를 만들어 display:none 값을 줬다.

.hide {
	display: none;
	}

 

그리고 classList를 사용할 생각으로 js파일에 선택자로 모든 요소들을 불러와 변수를 지정해줬다.

const start = document.querySelector("#start-page"); //시작 페이지 콘텐츠
const content1 = document.querySelector("#team-page"); //팀 페이지 콘텐츠
const content2 = document.querySelector("#member-page"); //멤버 페이지 콘텐츠

const btn1 = document.querySelector(".li-1"); //팀 페이지 버튼
const btn2 = document.querySelector(".li-2"); //멤버 페이지 버튼

 

window.onload 이벤트를 활용해 시작페이지의 요소들만 남기고 모두 숨겼다.

window.onload = function () {
  content1.classList.add("switch");
  content2.classList.add("switch");
  modal1.classList.add("switch");
  modal2.classList.add("switch");
  // start.classList.add("switch");
};

 

문제는 버튼에서 나왔다. 이벤트를 사용해 버튼을 누르면 해당 콘텐츠 외에는 .hide가 적용되도록 설정을 했는데,

** 버튼을 눌러도 다른 곳에서 나와야할 요소들이 사라지지 않거나 나타나지 않았다. **

// 팀 btn
btn1.addEventListener("click", () => {
    title.classList.add("switch");
    content2.classList.add("switch");
    content1.classList.remove("switch");
});

// 멤버 btn
btn2.addEventListener("click", () => {
    start.classList.add("switch");
    content1.classList.add("switch");
    content2.classList.remove("switch");
});

 

이미 클라스가 있는 상태에서 add를 하는 등, 충돌이 있어서 안되나? 싶어서,

if 문을 사용하여 조금 변경 해주었다.

// 팀 btn
btn1.addEventListener("click", () => {
  if (
    content2.classList.contains("switch") &&
    start.classList.contains("switch")
  ) {
  } else {
    title.classList.add("switch");
    content2.classList.add("switch");
    content1.classList.remove("switch");
  }
});

// 멤버 btn
btn2.addEventListener("click", () => {
  if (
    content1.classList.contains("switch") &&
    title.classList.contains("switch")
  ) {
  } else {
    start.classList.add("switch");
    content1.classList.add("switch");
    content2.classList.remove("switch");
  }
});

 

그렇게 완성!

 

 

---

       새로운 개념 정리 

01 window.onload

페이지가 로드되자마자 실행시키는 함수

 

02 classList.contains("")

문자열의 .includes()와 비슷하게 사용.

""를 포함할 때 참

 

---

자바스크립트를 공부만 하다가 처음으로 적용해봤는데,

HTML 요소들을 동적으로 제어하는 작업이 생각보다 직관적이고 재미있었다.

 

그동안 열심히 했더 코딩테스트로 배운 함수를 실제로 응용하니 더 이해가 잘 되는 것도 있었고,

작은 실수들로 코드가 아예 실행되지 않는 걸 보면서 좀 더 철저하고 꼼꼼해져야겠다고 생각함

 

변수명 설정하는 것도 더 잘하고 싶고!!!!!! 더 복잡한 기능도 구현하고싶다!!!!!