앵커를 통해 엘리멘터 탭 위젯의
특정 탭을 여는 방법

이야기에 앞서

엘리멘터에서 기본으로 제공하는 Elementor Tabs Widget은 탭 마다 고유 ID를 설정할 수 있다. 고유 ID가 있는 이유는 외부 링크나 URL의 앵커(#)를 통해 해당 탭을 활성화시키기 위함이다. 하지만 실제로 엘리멘터의 탭 위젯은 이 로직이 작동하지 않는다. 자바스크립트 코드를 통해 이 문제를 해결해 보자 .

코드

탭 위젯이 있는 템플릿에 새로운 HTML Widget을 만들고 아래의 코드를 삽입한다.

이 코드는 Imran Siddiq – Web Squadron의 Open Tab with a Link or Button 영상에서 확인할 수 있다. 탭 위젯 뿐만 아니라 Accordian 위젯도 해당한다.

위젯 설정

이제 탭 위젯의 각 탭 마다 CSS ID 필드에 원하는 아이디를 입력한다. 실제 URL에 포함 될 이름이 된다.

링크 확인

웹브라우저에서 탭 위젯이 있는 페이지를 열어 테스트한다. 미리보기 버튼을 통해 나타난 페이지에서도 제대로 작동하는 것을 확인했다. URL 입력란에 해당 페이지 주소를 입력하고 맨 마지막에 #tab-02 등과 같이 활성화 시킬 탭의 ID를 명시해준다. (https://your-domain/widget-test#tab-02).

해당 탭이 위치한 곳으로 스크롤이 발생하며 앵커에 명시한 탭이 활성화 되면 정상적인 작동이라 볼 수 있다. 아래 탭 위젯을 통해 테스트 해보자. 여기를 클릭하면 아래 탭의 두 번째 탭이 곧바로 활성화 된다.

이제 웹 브라우저의 새로운 창에 다음 주소를 입력 후 진입해 본다. https://newstoday.io/pressroom/앵커를-통해-엘리멘터의-특정-탭을-여는-방법#tab-02