-
자바스크립트로 탭 구현하기(신입버젼)Study/JavaScript 2023. 1. 6. 10:40반응형
자바스크립트로 탭 메뉴를 구현할 일이 생겨 공부겸 포스팅 해본다.
우선은 저는 신입이고 프론트단은 해본적이 없어서 매우 기초적인 국비교육생 수준이니
신입 및 국비교육생이 포스팅의 대상이 될거 같다.
1.구현시 결과화면
2.코드
(1) html 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>탭 메뉴 연습</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="tab.js"></script> </head> <body> <div class="container mt-5"> <ul class="list"> <li class="tab-button">탭1</li> <li class="tab-button active">탭2</li> <li class="tab-button">탭3</li> </ul> <div class="tab-content"> <p>탭1 화면 입니다.</p> </div> <div class="tab-content show"> <p>탭2 화면 입니다.</p> </div> <div class="tab-content"> <p>탭3 화면 입니다.</p> </div> </div> </body> </html>(2) css 코드
ul.list { list-style-type: none; } .tab-button { display: inline-block; } .active { background-color: aqua; } .tab-content { display: none; padding: 10px; } .show { display: block; }(3)JavaScript 코드
console.log 부분은 정말 실행이 되는지 확인차 넣어 본거니 삭제해도 무방하다.
for문을 통해서 tabOpen()메서드를 html 의 tab-button의 선언한 클래스만큼 반복 하여 tab-button 함수호출하여 대기시킨다. eq(index) 함수는 내가 몇번탭을 눌러는지 구분해주는 함수이다.
탭을 구분하여 css로 선언한 .active 와 .show 클래스를 제거해주기도하고 추가해주기도 한다.
참고로 jQuery를 사용하여 구현했다.
$( document ).ready( function(){ for(let i = 0; i < $('.tab-button').length; i++){ console.log("i가 몇번이니??"+i); tabOpen(i); } function tabOpen(e){ $('.tab-button').eq(e).click(function(){ console.log("내가 몇번 눌렀게??"+e); $('.tab-button').removeClass('active'); $('.tab-content').removeClass('show'); $('.tab-button').eq(e).addClass('active'); $('.tab-content').eq(e).addClass('show'); }); } });반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기) (0) 2023.02.12 초보자를 위한 캔버스(Canvas)로 그림 그리기 방법 (0) 2023.02.07 초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기) (1) 2023.01.18 초보자를 위한 반응형 기초(화면크기별로 width설정 하기) (0) 2023.01.07 모바일과 pc 디바이스 자바스크립트로 구분하는 쉬운방법 (0) 2023.01.06