[포트폴리오 페이지]_2단계 TAB구성_ feat(Spring)

목표]

 

기본적인 tab의 구성은 포스트 참조

https://yn971106.tistory.com/61

[TAB 구현 심화_3]_Spring에서 tab 구현해보기 (feat 메모리 저장)

위의 포스팅과 다른점은

1. _history 탭 객체 안에 id를 부여하여 id를 기준으로 activate 된 tab을 찾아 css 속성을 적용시킨 것

2. 클래스 (css) 를 동적으로 부여한 점

 

이 되겠습니다.

 

해당 코드만 보겠습니다.

 

1. 클릭시 적용되는 css 부분 ] 

.tab-menu-click{
    display: inline-block;
    width: 150px;
    background-color: white;
    height: 40px;

}

style 부분에 위의 코드를 적었습니다.

 

2. 클릭시 해당 css클래스를 적용시키는 Jquery 부분]

$('.tabmenulist').removeClass('tab-menu-click');
$('#'+ _historyTab.id).addClass('tab-menu-click');

먼저 이전에 tab-menu-click 이라는 css가 적용이 되어있으면 제거를 먼저 하고

지금 activate 되어있는 탭의 id를 선택하여 해당 css를 입힙니다.

 

let _historyTab = {
    activate: undefined,
    tabs: {},
    id: ''
}

function setActivate(url,id) {
    _historyTab.activate = url;
    _historyTab.id = id
}

작동중인 탭의 id를 저장하도록 추가하고 이를 불러와서 activate 된 탭의 id를 찾는 구조입니다.

 

감사합니다.