[Jquery] data-tab(tab content) 탭메뉴 만들기

가장 기본적인 탭메뉴로 상단 탭을 누르면 선택된 내용을 불러오게 합니다.

. show()/. hide() 등 다양하게 탭메뉴를 만들 수 있지만

제가 사용해 본 결과 깔끔하고 오류 없이 사용할 수 있어 자주 쓰고 있는 방법입니다.

 

html구조도 크게 타지 않아 만들기 쉽습니다!

HTML

누를 상단 메뉴 부분과 보일 내용 부분을 넣어주는데

클릭될 상단메뉴에는 data-tab을 넣어 선택될 내용의 id 값을 넣어줍니다.
콘텐츠 부분에는 data-tab에 선택되는 id값을 넣어줍니다.
추가로 클래스를 활용하여 선택됐을 때 클래스를 먹여 스타일 보이고 사라지는 효과를 줄거니
가장 먼저보이는 부분에 클래스를 추가로 넣어주세요!

 

CSS

* jquery중심으로 보여드리기 위해 작성한 글이니 스타일은 개인적으로 손보시면 됩니다.

 추가되는 클래스에 display:block을 주어 클릭했을 때 클래스가 붙고 내용이 보이게 하고
선택되는 클래스에 스타일을 넣어주세요

콘텐츠 부분은 전체 dispaly:none;을 시켜줍니다.

 

JS

탭리스트 부분을 클릭하면 'tab-list'와 'tab-content'에 클래스'on'이 붙어 나타나게 됩니다.

 

위와 같이 작성하셨다면 아래와 같은 결과를 얻으실 수 있습니다.

See the Pen Untitled by y-jiseon (@y-jiseon) on CodePen.

 

data-tab은 탭메뉴 말고도 모달창을 띄우거나 할 때도 다양하게 활용할 수 있으니 기회가 되면 더 포스팅해보도록 하겠습니다!