[지식인] 탭메뉴 만들기

-하나의 탭을 클릭하면 해당 콘텐츠만을 표시하는 텝 콘텐츠를 만들어 봅시다.

-탭은 <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과 같은 코드이다.

tabmenu.zip

0.00MB

저작자표시 비영리 변경금지

'웹언어 > 지식인 답변 모음' 카테고리의 다른 글

[지식인] 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