반응형
[지식인] 탭메뉴 만들기
-하나의 탭을 클릭하면 해당 콘텐츠만을 표시하는 텝 콘텐츠를 만들어 봅시다.
-탭은 <a> 요소, 패널은 <div>요소로 작성하시오.
답변
-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">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<title>Document</title>
<style>
*{margin: 0; padding: 0; list-style: none; text-decoration: none;}
.tab{height: 150px; width: 100%; background-color: rgb(39, 55, 111); position: relative; top: 0; left: 0;}
.flex{display: flex; height: 50px; width: 90%; justify-content: space-around; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.panel{width: 24.5%; border-radius: 5px; height: 50px; display: block; background-color: black; text-align: center; line-height: 50px; color: white;}
.active{background-color: white !important; color:black !important;}
.content{display: none;}
.on{display: block !important;}
</style>
</head>
<body>
<div class="tab">
<div class="flex">
<a href="#" class="panel active">panel 1</a>
<a href="#" class="panel">panel 2</a>
<a href="#" class="panel">panel 3</a>
<a href="#" class="panel">panel 4</a>
</div>
</div>
<div id="contents1" class="content on">
컨텐츠 1
</div>
<div id="contents2" class="content">
컨텐츠 2
</div>
<div id="contents3" class="content">
컨텐츠 3
</div>
<div id="contents4" class="content">
컨텐츠 4
</div>
<script>
$('.flex a').click(function(){
let index = $(this).index();
index++;
$('.flex a').removeClass('active');
$(this).addClass('active');
$('.content').removeClass('on');
$('#contents'+index).addClass('on');
})
</script>
</body>
</html>
풀이
풀이는 script부분을 확인하시면 됩니다.
탭메뉴는 탭을 눌럿을 때 메뉴가 바뀌는 기능으로
우선 탭을 누를때 이벤트가 발생합니다.
// 클릭이벤트 탭을 눌럿을때 이벤트 발생
$('.flex a').click(function(){
}
탭을 누른뒤 탭의 index() 정보를 변수로 저장합니다.
index란 내가 누른 탭이 몇번째 탭인지에 대한 정보
// 변수로 저장
let index = $(this).index();
// ++로 내가 누른 탭의 값을 1증가 시킨다.
//index는 0번째 부터 시작하기 때문에 1을 증가시킴
index++;
미리 셋팅해둔 css로 해당 탭을 on,off 할 수 있음
// 클릭시 모든 클래스를 제외시킴
$('.flex a').removeClass('active');
// 누른 텝을 보이게 설정
$(this).addClass('active');
//모든 메뉴의 클래스를 제외시킴
$('.content').removeClass('on');
//클릭한 탭을 보이게 설정
$('#contents'+index).addClass('on');
결과
첨부 받은 이미지 대로 구현하려 했으며 세부 내용은 아래의 압축파일을 받아서 확인 가능하다.
압축파일은 본분의 html과 같은 코드이다.
반응형
'웹언어 > 지식인 답변 모음' 카테고리의 다른 글
| [지식인] prototype 질문 (2) | 2022.04.19 |
|---|---|
| [지식인] Form 질문 (2) | 2022.03.28 |
| [지식인] html 시간표 질문 (2) | 2022.03.28 |
| html 커서 이미지 바꾸기 (2) | 2021.11.03 |
| CSS 클래스 요소 삭제 질문 (2) | 2021.10.23 |
