728x90
728x90
페이지 내에서 작동하는 탭입니다.
Html
<div class="auto">
<div class="tab_wrap">
<div class="project_lnb">
<ul class="biz-category tit_list grid04">
<li class="item tab01 active" data-target="tab01"><a href="#con01">tab1</a></li>
<li class="item tab02" data-target="tab02"><a href="#con02">tab2</a></li>
<li class="item tab03" data-target="tab03"><a href="#con03">tab3</a></li>
<li class="item tab04" data-target="tab04"><a href="#con04">tab4</a></li>
</ul>
</div>
<ul class="tab_con">
<!-- con01 -->
<li id="con01" class="tab_list active">
<div class="biz-item contents__list">
1111
</div>
</li>
<!-- con02 -->
<li id="con02" class="tab_list">
<div class="biz-item contents__list">
2222
</div>
</li>
<!-- con03 -->
<li id="con03" class="tab_list">
<div class="biz-item contents__list">
3333
</div>
</li>
<!-- con04 -->
<li id="con04" class="tab_list">
<div class="biz-item contents__list">
4444
</div>
</li>
</ul>
</div>
</div>
Css
<style>
.tab_wrap .tab_con .tab_list {
display: none;
}
.biz-category{display:grid; border:1px solid #d9d9d9;}
.biz-category.grid04{grid-template-columns: 1fr 1fr 1fr 1fr;}
.biz-category > li{border-right:1px solid #d9d9d9;}
.biz-category > li:last-child{border-right:0;}
.biz-category > li.active{color:#fff; background:#404040;}
.biz-category > li a{display: flex; align-items:center; justify-content:center; height:60px;}
</style>
Jquery
<script>
$(document).ready(function () {
tab();
})
function tab() {
//탭메뉴 클릭할 때 실행
$('.tab_wrap .tit_list > li a').on('click', function (e) {
e.preventDefault();
//초기화
$('.tab_wrap .tit_list > li').removeClass('active');
$('.tab_wrap .tab_list').hide();
//실행
$(this).parent().addClass('active');
var activeTab = $(this).attr('href');
$(activeTab).show();
//파라미터 확인
urlParam = location.search.substr(location.search.indexOf("?") + 1);
if (urlParam != '') {
urlParam = '?' + urlParam;
}
//파라미터 변경
getNewUrl('tabName', urlParam); //(변경·추가할 파라미터 이름, 현재 파라미터)
function getNewUrl(paramName, oldUrl) {
var newUrl;
var urlChk = new RegExp('[?&]' + paramName + '\\s*=');
var urlChk2 = new RegExp('(?:([?&])' + paramName + '\\s*=[^?&]*)')
if (urlChk.test(oldUrl)) { //해당 파라미터가 있을 때
newUrl = oldUrl.replace(urlChk2, "$1" + paramName + "=" + activeTab.substr(1));
} else if (/\?/.test(oldUrl)) { //해당 파라미터가 없고 다른 파라미터가 있을 때
newUrl = oldUrl + "&" + paramName + "=" + activeTab.substr(1);
} else { //파라미터가 없을 때
newUrl = oldUrl + "?" + paramName + "=" + activeTab.substr(1);
}
history.pushState(null, null, newUrl);
}
});
//파라미터 값 검사
function getParameter(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var getParam = getParameter('tabName'); //선택한 탭 파라미터
var loadChk = getParameter('loadChk'); //첫 로드 여부 체크
if (getParam != '') { //파라미터 값이 있으면 파라미터 값 기준으로 탭메뉴 선택
$('.tab_wrap .tit_list > li a[href="#' + getParam + '"]').parent().addClass('active');
$('.tab_wrap .tit_list > li a[href="#' + getParam + '"]').trigger('click');
if (loadChk == 'on') { //처음 로드되었으면 스크롤 이동
//탭 위치로 이동
var tabTop = $('.tab_wrap').offset().top;
$(window).scrollTop(tabTop - 100);
//파라미터 확인
var urlParam = location.search.substr(location.search.indexOf("?") + 1);
if (urlParam != '') {
urlParam = '?' + urlParam;
}
//loadChk 파라미터 값 변경
loadChange('loadChk', urlParam);
function loadChange(paramName, oldUrl) {
var newUrl;
var urlChk = new RegExp('[?&]' + paramName + '\\s*=');
var urlChk2 = new RegExp('(?:([?&])' + paramName + '\\s*=[^?&]*)')
newUrl = oldUrl.replace(urlChk2, "$1" + paramName + "=off");
history.pushState(null, null, newUrl);
}
}
} else { //파라미터 값이 없으면 active 클래스 기준으로 탭메뉴 선택
var activeChk = 0;
$('.tab_wrap .tit_list > li').each(function (i) {
if ($(this).hasClass('active')) {
$(this).addClass('active');
$(this).find('a').trigger('click');
activeChk++
}
});
//active 지정 안했을 시 첫 탭메뉴 선택
if (activeChk == 0) {
$('.tab_wrap .tit_list > li:first-child a').trigger('click');
}
}
//뒤로가기 탭메뉴 복구
window.onpopstate = function (event) {
//초기화
$('.tab_wrap .tit_list > li').removeClass('active');
$('.tab_wrap .tab_list').hide();
var getParam2 = getParameter('tabName'); //선택한 탭 파라미터
//탭메뉴 열기
if (getParam2 != '') {
$('.tab_wrap .tit_list > li a[href="#' + getParam2 + '"]').parent().addClass('active');
$('#' + getParam2).show()
} else {
$('.tab_wrap .tit_list > li:first-child').addClass('active');
$('.tab_wrap .tab_list:first-of-type').show();
}
};
}
</script>
반응형
'Code > Html' 카테고리의 다른 글
Select 에서 Option 클릭 시 이동 (0) | 2023.12.11 |
---|---|
배경에 영상 넣기 (0) | 2023.08.11 |
링크 이동하는 방법들 (a태그, onclick) (0) | 2023.01.27 |
홈페이지에서 신청 시 받는 메일 만들기 (폼메일) (0) | 2023.01.26 |
페이지 내에서 탭으로 변경하는 컨텐츠 (0) | 2023.01.25 |