jQuery 와 Tabs 플러그인을 이용한 예제

간단한 Tabs

첫번째
두번째
세번째

스크립트 :

$('#container-1 > ul').tabs();

페이지 소스 :

div로 감싸진 ul-li 태그 구조로서 쉽게 탭을 구현
탭을 클릭시 링크와 동일한 아이디를 활성화
첫번째 탭은 디폴트로 활성화

내용2

내용3

활성화될 탭을 지정할 경우

첫번째
두번째
세번째

내용1

스크립트 :

$('#container-2 > ul').tabs({ selected: 1 });

페이지 소스 :

selected : index 번호 의 형태로 디폴트로 활성화될 탭을 지정
index번호는 순서대로 0부터 시작

내용3

슬라이딩 효과 주기

One
Two
Three

Use a slide effect to switch tabs. You can optionally specify the speed for the animation with the option fxSpeed: value. The value is either a string of one of the predefined speeds in jQuery (slow, normal, fast) or an integer value specifying the duration for the animation in milliseconds. If omitted it defaults to normal.

$('#container-3 > ul').tabs({ fx: { height: 'toggle' } });

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Use a fade effect to switch tabs. You can optionally specify the speed for the animation with the option fxSpeed: value. The value is either a string of one of the predefined speeds in jQuery (slow, normal, fast) or an integer value specifying the duration for the animation in milliseconds. If omitted it defaults to normal.

$('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });

슬라이딩과 페이드 동시 효과

One
Two
Three

Use a combined slide and fade effect to switch tabs:

$('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

콜백 함수의 호출

One
Two
Three

Define callback functions that are invoked at different points in time during the tab switch process.
If the select callback returns false, the clicked tab won't be selected. This is useful if switching tabs requires form validation before for example.

$('#container-6 > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } })
   .bind('select.ui-tabs', function(e, ui) {
        alert('event: ' + e.type);
    })
    .bind('show.ui-tabs', function(e, ui) {
        alert('event: ' + e.type);
    });

애니메이션 효과

One
Two
Three

Define your own custom animation:

$('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });

Ajax로 링크의 내용을 읽어와서 출력

Triggering, Enabling, Disabling, Adding and Removing Tabs

One
Two
Three

$('#container-9 > ul').tabs('select', 2); // simulate click on 3rd tab
$('#container-9 > ul').tabs('enable', 2); // enable 3rd tab
$('#container-9 > ul').tabs('disable, 2); // disable 3rd tab
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab'); // add new tab at the end
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab', 1); // add new tab at 2nd position
$('#container-9 > ul').tabs('remove', 3); // remove 4th tab

One or more tabs can also be disabled immediatly by simply setting the disabling class for the li element representing that particular tab:

<li class="ui-tabs-disabled">…</li>

Or by using the disabled option:

$('#container-9 > ul').tabs({ disabled: [1, 2] });

Start with all tabs unselected/allow toggle visibility

One
Two
Three

$('#container-10 > ul').tabs({ selected: null }); // start with all tabs hidden
$('#container-10 > ul').tabs({ unselect: true }); // selected tab closes on click

Setting selected option to null automatically sets unselect to true.

Custom event

One
Two
Three

Define mouseover event to switch tabs (or any other reasonable event)

$('#container-11 > ul').tabs({ event: 'mouseover' });

Changelog

3.5 (jQuery UI 1.5) - simplified API, truly events based callback system, all things zero-based for consistency, removed hide callback (obsolete, wasn't used by anyone), set selected tab via selected option, set all tabs unselected via selected: null instead of another redundant option, simplified effects options - one fx option (which mirrors jQuerys default animate options) instead of a bunch of others to remember.
3.0 - release

Tested with

Firefox 2
Safari 2.0.4
Opera 9.24
IE 7
IE 6