본문 바로가기

Frontend/jQuery & JSTL

[jQuery] tab관리 작업

반응형

tab을 선택하면 선택 위치에 따라서 모서리 굴곡이 달라지게 수정

(e.g. 3개의 탭중 처음 탭을 선택하면 좌측 상단에 굴곡이 생김, 마지막 탭을 선택하면 우측 상단에 굴곡이 생김)

$(".date .tab li").on(
	"click",
	function() {
		let sel = $(this).index();
		$(this).addClass("on").siblings().removeClass("on");
		//var pageUrl;
		if (sel == 0) {
			$(".date .tabContents").css({borderTopLeftRadius : 0});
			$(".date .tabContents ol > li").removeClass("on");
			$(".date .tabContents ol > li").eq(sel).addClass("on");
		} else if (sel == 2) {
			$(".date .tabContents").css({borderTopRightRadius : 0});
			$(".date .tabContents ol > li").removeClass("on");
			$(".date .tabContents ol > li").eq(sel).addClass("on");
		} else {
			$(".date .tabContents").removeAttr("style");
			$(".date .tabContents ol > li").removeClass("on");
			$(".date .tabContents ol > li").eq(sel).addClass("on");
		}
	return false;
});

 

 

반응형

'Frontend > jQuery & JSTL' 카테고리의 다른 글

12/05 회고  (0) 2023.12.05
[JSTL] 페이지 작업  (0) 2023.11.22
[JSTL] data와 li요소 항목 비교해서 표시하기  (0) 2023.11.16
[jQuery] 백분위수 배열  (0) 2023.11.14
[SQL] subquery & join 작업  (0) 2023.11.13