솔솔

[JavaScript] 탭 메뉴 페이지 이동 (3가지) 본문

나의보물들/JavaScript

[JavaScript] 탭 메뉴 페이지 이동 (3가지)

솔솔하네 2022. 9. 28. 10:43
반응형

Div 안에 링크 걸기

// HTML
<div OnClick="location.href ='{url}'"> 예약확인/취소 </div>
<div OnClick="location.href ='{url}'"> 회원정보 수정 </div>
<div OnClick="location.href ='{url}'"> 회원 탈퇴 </div>

 

Div의 data 속성 값 이용(1)

// HTML
<div class="mypageTab" data-menu="reservation"> 예약확인/취소 </div>
<div class="mypageTab" data-menu="userUpdate"> 회원정보 수정 </div>
<div class="mypageTab" data-menu="userDelete"> 회원 탈퇴 </div>
//JS
	$('.mypageTab').on('click', function() {
    
		const menu = $(this).data('menu');
 
        if(menu == reservation) {location.href = '{이동할url}'}
        if(menu == uUpdate) {location.href = '{이동할url}'}
        if(menu == uDelete) {location.href = '{이동할url}'}
	
	});

 

Div의 data 속성 값 이용(2)

// HTML
<div class="mypageTab" data-menu="reservation"> 예약확인/취소 </div>
<div class="mypageTab" data-menu="userUpdate"> 회원정보 수정 </div>
<div class="mypageTab" data-menu="userDelete"> 회원 탈퇴 </div>
// JS
	$('.mypageTab').on('click', function() {
	
		const cos = {
				'uUpdate' : '{이동할URL}',
				'uDelete' : '{이동할URL}',
				'reservation' : '{이동할URL}'
		}
        
		 location.href = cos[$(this).data('menu')];
	});

'나의보물들 > JavaScript' 카테고리의 다른 글

Echats 사용법  (0) 2022.10.20
서버와 통신 중 프로그래스바 표시  (0) 2022.09.16
[JavaScript + CSS] 타입이file인 input 디자인 변경  (0) 2022.03.16
[JavaScript] +JSP 세션시간 안내, 세션 만료 안내 및 로그아웃  (0) 2022.03.05
[JavaScript] input 타입 date에 max설정하기  (0) 2022.03.02
'나의보물들/JavaScript' Related Articles more