728x90
jquery를 이용하면 탭 메뉴를 아주 쉽게 구현할 수 있다
웹 개발을 진행할 때, UI를 효율적으로 사용하기 위해 탭 메뉴가 자주 사용되곤 한다.
제이쿼리 문법을 통해 재사용할 수 있는 탭 메뉴를 만들어보자
1.
cdn 참조
Jquery 3. 6
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
Jquery-ui (참고)
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
예제
1
JSP
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">
<a class="nav-link active" id="tab1">
Number 1
</a>
</li>
<li class="tab-link" data-tab="tab-2">
<a class="nav-link" id="tab2">
Number 2
</a>
</li>
<li class="tab-link" data-tab="tab-3">
<a class="nav-link" id="tab3">
Number 3
</a>
</li>
<li class="tab-link" data-tab="tab-4">
<a class="nav-link" id="tab4">
Number 4
</a>
</li>
</ul>
<div id="tab-1" class="tab-content">
<a>탭 영역 1</a>
</div>
<div id="tab-2" class="tab-content">
<a>탭 영역 1</a>
</div>
<div id="tab-3" class="tab-content">
<a>탭 영역 1</a>
</div>
<div id="tab-4" class="tab-content">
<a>탭 영역 1</a>
</div>
</div>
</body>
</html>
|
cs |
2
Javascript
2.1 기본적으로 탭 메뉴는 1번으로 초기화 된다
(원하는대로 설정하면 됨)
2.2 탭 메뉴를 클릭했을 때 이벤트
|
<script type="text/javascript">
$(document).ready(function() {
// 탭 메뉴를 1번으로 초기화
$('ul.tabs li:eq(0)').addClass('current');
$('#tab-1').addClass('current');
});
//탭 바 클릭 이벤트
// 클릭할 때 마다 포커스 되는
$('ul.tabs').on("click","li",function(event){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
</script>
|
cs |
3
CSS
|
@charset "UTF-8";
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
padding: 15px 0;
border-top:3px solid #eee;
}
.tab-content.current{
display: inherit;
}
|
cs |
기본적으로 사용할 수 있는 탭 메뉴가 완성되었다 !
728x90
'개발 > FRONT' 카테고리의 다른 글
| [JS] Jquery Input 태그에서 달력 가져오기 datepicker (0) | 2023.01.02 |
|---|---|
| [JS] Jquery 상단 바 고정 하는 법, 상단 고정 스크롤 헤더 사용하기 (0) | 2023.01.02 |
| [Javascript] Url 파라미터 가져오는 방법, 새로고침 파라미터 수정 추가 방법 (0) | 2022.08.25 |
| [Javascript] 객체에 데이터 담아서 전달하기 (서버에서 Map으로 데이터 받기), 객체 리스트에 담아서 전달하기 (0) | 2022.08.25 |
| [Jquery] 클릭한 특정 영역 id,class 없이 삭제하기 (0) | 2022.08.25 |
