728x90
728x90
< HTML >
<div class="tab_wrap">
<div class="auto">
<div class="tab__title">
<div class="main-title point">과일 및 채소류</div>
<ul class="biz-category tit_list">
<li class="item tab01 active" data-target="tab01"><a href="#con01">tab01</a></li>
<li class="item tab02" data-target="tab02"><a href="#con02">tab02</a></li>
<li class="item tab03" data-target="tab03"><a href="#con03">tab03</a></li>
</ul>
</div>
</div>
<div class="auto">
<ul class="tab_con">
<li id="con01" class="tab_list active">
<div class="biz-item">
<div class="item">
content01
</div>
</div>
</li>
<li id="con02" class="tab_list">
<div class="biz-item">
<div class="item">
content02
</div>
</div>
</li>
<li id="con02" class="tab_list">
<div class="biz-item">
<div class="item">
content03
</div>
</div>
</li>
</ul>
</div>
</div>
< JAVASCRIPT >
$(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();
}
};
}
반응형
'Code > Html' 카테고리의 다른 글
링크 이동하는 방법들 (a태그, onclick) (0) | 2023.01.27 |
---|---|
홈페이지에서 신청 시 받는 메일 만들기 (폼메일) (0) | 2023.01.26 |
웹 성능을 올리는 방법 (Image Lazy Loading) (0) | 2023.01.04 |
확장자 .htm과 .html의 차이점 (0) | 2023.01.04 |
유튜브 썸네일 이미지 가져오기 (0) | 2022.12.08 |