[해피CGI][cgimall] Easy Tab Switch Plugin For jQuery - Tabs.js

다운로드 받은 압축파일을 해제한후,
index.html 파일을 웹브라우저로 열어서 보면
샘플을 확인하는게 가능합니다.

 

 

위 그림과 같은 탭메뉴를 화면에 표시해줍니다.


웹페이지에 탭메뉴를 구현해 둔
자바스크립트와, HTML소스코드는 예제가 매우 많지만,
탭메뉴의 개수, 적용되는 효과, 작동하는 이벤트 등의 이유로
다소 이용하기에 복잡한게 많습니다.

이 프로그램은 비교적 간단하게 사용할 수가 있어서 유용할것 같네요.

 

 

 

 

1. 위와 같이 ul, li 태그로 탭메뉴 부분을 만들고,
각 탭에 연결되는 컨텐츠를 코딩합니다.

 

 

 

 

2. jquery 와 tabs.js 가 로딩되도록 위 태그를 넣어줍니다.

 

 

​

​3. ul 태그에 지정한 id 를 이용해서
위와 같은 스크립트로 탭메뉴를 활성화 시킬수 있습니다.


심플한 만큼 다양한 기능을 구현하려면 약간은 손을 대야 하겠네요.
하지만, 탭메뉴를 손쉽게 만들어낼수 있다는 장점은 커 보입니다.

​

​

​