jQuery로 레이아웃 탭메뉴 클릭 설정
자바스크립트 레이아웃 탭메뉴 클릭 시 나타나는 효과 설정
오늘은 레이아웃에서 탭메뉴를 눌렀을 때 공지사항과 갤러리가 따로 보이개 하는 방법을 알려드리려고 하는데요,
이번에도 어렵지 않으니 한번 따라해보세요!
1. 통합 section 영역 추가하기
▶ 가장 먼저 레이아웃 세번째 섹션에 공지사항과 갤러리를 통합하는 하나의 notice section을 만들어줍니다.
1
2
3
<section class="notice">
</section>
2. title 추가하기
▶ 큰 틀을 만들었다면 그 다음엔 하나의 타이틀 제목인 공지사항과 갤러리 태그를 만들어줍니다. 공지사항은 텍스트지만 갤러리는 사진이 들어갈테니 link도 같이 걸어주세요.
1
2
3
4
5
6
7
8
<section class="notice">
<div class="title">
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">갤러리</a></li>
</ul>
</div>
</section>
3. title의 하위 내용 추가 입력하기
▶ 공지사항과 갤러리에 들어갈 내용은 cont라는 class를 만들어 입력해주시는데요, 그 안에 div박스를 두 개 만들어 공지사항과 갤러리에 들어갈 내용이 구분지어줍니다.
실제 홈페이지처럼 링크를 누르면 해당 페이지로 넘어갈 수 있도록 하려면 텍스트에도 link를 걸어주시면 되겠죠? 여기에 저는 임의로 3장을 갤러리 이미지를 넣도록 하겠습니다.
내용은 임의로 지정하셔도 되고 저를 따라하셔도 괜찮아요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section class="notice">
<div class="title">
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">갤러리</a></li>
</ul>
</div>
<div class="cont">
<div>
<ul>
<li><a href="#">박물관 오픈 날짜 확정</a><span>2024.04.17</span></li>
<li><a href="#">기능건설 주주총회 날짜 발표</a><span>2024.04.20</span></li>
<li><a href="#">기능건설 사이트 오픈</a><span>2024.05.01</span></li>
<li><a href="#">건축 사업 리모델링 확정</a><span>2024.05.10</span></li>
<li><a href="#">기업정보 사이트 오픈</a><span>2024.05.25</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="#"><img src="/webd/siteF/images/gallery01.jpg" alt="갤러리 오픈"></a></li>
<li><a href="#"><img src="/webd/siteF/images/gallery02.jpg" alt="갤러리 오픈"></a></li>
<li><a href="#"><img src="/webd/siteF/images/gallery03.jpg" alt="갤러리 오픈"></a></li>
</ul>
</div>
</div>
</section>
4. jQuery를 활용해 title 클릭 시 해당 내용만 나오는 탭메뉴 효과주기
▶ 이제 마지막 단계로 script에 jQuery 코드를 활용해 원하는 효과를 실행시켜주면 되는데, 우선 const를 통해 title과 cont에 해당하는 내용을 각각 tabBtn, tabCont 버튼으로 지정해줍니다.
설명하기 쉽게 두 버튼 이름을 탭버튼과 콘텐츠버튼이라고 할게요!
1
2
3
4
$(function (){
const tabBtn = $(".notice .title > ul > li");
const tabCont = $(".notice .cont > div");
});
▶ 먼저 콘텐츠버튼의 내용을 숨긴 후 첫번째 콘텐츠 내용인 공지사항의 내용만 나오도록 만들어줍니다. 풀이 그대로 hide()를 이용해 전체를 숨기고 index를 표기하는 eq를 이용해 첫번째 인덱스만 show()로 보여주면 됩니다.
그 다음 탭버튼을 누르면 내가 클릭한 번호가 저장될 수 있도록 해줄건데, $(this)는 현재 작업 중인 요소를 나타냅니다. 여기에 .index()는 선택된 요소의 인덱스를 반환하는 jQuery 메서드로 이렇게하면 index에 현재 선택된 요소의 인덱스가 저장됩니다.
1
2
3
4
5
6
7
8
9
$(function (){
const tabBtn = $(".notice .title > ul > li");
const tabCont = $(".notice .cont > div");
tabCont.hide().eq(0).show;
tabBtn.click(function () {
const index = $(this).index();
});
});
▶ 여기서 공지사항과 갤러리라는 탭을 눌렀을 때 관련 내용이 보이도록 해야하기 때문에 공지사항 li 옆에 ‘active’라는 class를 추가해주셔야합니다.
그런 다음에 다시 jQuery 스크립트로 돌아와 해당 탭버튼이 active되었을 때 siblings를 사용해 형제요소인 다른 class의 ‘active’는 보이지 않도록 해줍니다.
그리고 콘텐츠버튼도 탭버튼에 해당하는 내용에 맞게 보일 수 있도록 해줄건데, 위에서 한 것과 비슷하게 eq(index)를 이용해 공지사항과 갤러리라는 각각의 인덱스가 실행되었을 때 show()를 통해 보여주고, 그 외의 형제요소는 hide()로 숨겨주도록 만들어주면 끝입니다.
1
2
3
4
5
6
7
8
<section class="notice">
<div class="title">
<ul>
<li class="active"><a href="#">공지사항</a></li>
<li><a href="#">갤러리</a></li>
</ul>
</div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
$(function (){
const tabBtn = $(".notice .title > ul > li");
const tabCont = $(".notice .cont > div");
tabCont.hide().eq(0).show;
tabBtn.click(function () {
const index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
tabCont.eq(index).show().siblings().hide();
});
});
이렇게 하면 공지사항을 눌렀을 때와 갤러리를 클릭했을 때 해당하는 내용만 보이게 됩니다! 오늘도 간단한 방법으로 레이아웃 영역에 효과를 주는 방법에 대해 알아봤는데요,
간단한 코드만으로도 그럴싸한 효과를 낼 수 있으니 한번 따라해보는 것도 좋을 것 같습니다😊