JavaScript + Ajax 実践サンプル集

jQuery UI Tabs(Simple tabs)

説明補足説明コード分割コードコメント投稿

このサンプルは、jQueryのプラグインUI Tabsを使用してタブを表示します。[tab1][tab2][tab3]をクリックするとタブのコンテンツが表示されます。UI Tabsは、スライド、フェードなどを付加してカスタマイズすることができます。

このサンプルを編集して試してみる!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI Tabs</title>
  <link href="jQuery/uitabs/ui.tabs.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.3.js" type="text/javascript"></script>
  <script src="jQuery/uitabs/ui.tabs.pack.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#tabs > ul').tabs();  // Simple tabs     
      // $('#tabs > ul').tabs({selected:1});  // Start with custom tab
      // $('#tabs > ul').tabs({fx: { height: 'toggle' }});   // Slide effect 
      // $('#tabs > ul').tabs({fx: { opacity: 'toggle' }});  // Fade  effect 
      // $('#tabs > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' }});  // Slide and Fade effect combined
      // $('#tabs > ul').tabs({event: 'mouseover'});  // Custom event     
    });
  </script>
</head>
<body>

<h2>Simple Tabs</h2>

<div id="tabs">
      <ul>
          <li><a href="#tab1"><span>tab1</span></a></li>
          <li><a href="#tab2"><span>tab2</span></a></li>
          <li><a href="#tab3"><span>tab3</span></a></li>
      </ul>
      <div id="tab1">
          <p>jQuery UI Tabs (Simple Tabs)</p>
          <pre><code>$('#tabs > ul').tabs();</code></pre>       
      </div>
      <div id="tab2">
          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.
      </div>
      <div id="tab3">
          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.
      </div>
  </div>

</body>
</html>

外部スクリプトCSS部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
ui.tabs.js

/*
 * Tabs 3 - New Wave Tabs
 *
 * Copyright (c) 2007 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI/Tabs
 */

(function($) {

    // if the UI scope is not availalable, add it
    $.ui = $.ui || {};

    // tabs API methods
    $.fn.tabs = function() {
        var method = typeof arguments[0] == 'string' && arguments[0];
        var args = method && Array.prototype.slice.call(arguments, 1) || arguments;

        return method == 'length' ?
            $.data(this[0], 'tabs').$tabs.length :
            this.each(function() {
                if (method) {
                    var tabs = $.data(this, 'tabs');
                    if (tabs) tabs[method].apply(tabs, args);
                } else
                    new $.ui.tabs(this, args[0] || {});
            });
    };

    // tabs class
    $.ui.tabs = function(el, options) {
        var self = this;
        
        this.options = $.extend({}, $.ui.tabs.defaults, options);
        this.element = el;

        // doesn't extend with null
        if (options.selected === null)
            this.options.selected = null;

        this.options.event += '.tabs'; // namespace event

        $(el).bind('setData.tabs', function(event, key, value) {
            if ((/^selected/).test(key))
                self.select(value);
            else {
                self.options[key] = value;
                self.tabify();
            }
        }).bind('getData.tabs', function(event, key) {
            return self.options[key];
        });

        // save instance for later
        $.data(el, 'tabs', this);

        // create tabs
        this.tabify(true);
    };
    
    $.ui.tabs.defaults = {
        // basic setup
        selected: 0,
        unselect: false,
        event: 'click',
        disabled: [],
        cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
        // TODO history: false,

        // Ajax
        spinner: 'Loading…',
        cache: false,
        idPrefix: 'ui-tabs-',
        ajaxOptions: {},

        // animations
        fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }

        // templates
        tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
        panelTemplate: '<div></div>',

        // CSS classes
        navClass: 'ui-tabs-nav',
        selectedClass: 'ui-tabs-selected',
        unselectClass: 'ui-tabs-unselect',
        disabledClass: 'ui-tabs-disabled',
        panelClass: 'ui-tabs-panel',
        hideClass: 'ui-tabs-hide',
        loadingClass: 'ui-tabs-loading'
    };

    // instance methods
    $.extend($.ui.tabs.prototype, {
        tabId: function(a) {
            return a.title && a.title.replace(/\s/g, '_').replace(/[^A-Za-z0-9\-_:\.]/g, '')
                || this.options.idPrefix + $.data(a);
        },
        ui: function(tab, panel) {
            return {
                instance: this,
                options: this.options,
                tab: tab,
                panel: panel
            };
        },
        tabify: function(init) {

            this.$lis = $('li:has(a[href])', this.element);
            this.$tabs = this.$lis.map(function() { return $('a', this)[0]; });
            this.$panels = $([]);

            var self = this, o = this.options;

            this.$tabs.each(function(i, a) {
                // inline tab
                if (a.hash && a.hash.replace('#', '')) // Safari 2 reports '#' for an empty hash
                    self.$panels = self.$panels.add(a.hash);
                // remote tab
                else if ($(a).attr('href') != '#') { // prevent loading the page itself if href is just "#"
                    $.data(a, 'href.tabs', a.href); // required for restore on destroy
                    $.data(a, 'load.tabs', a.href); // mutable
                    var id = self.tabId(a);
                    a.href = '#' + id;
                    var $panel = $('#' + id);
                    if (!$panel.length) {
                        $panel = $(o.panelTemplate).attr('id', id).addClass(o.panelClass)
                            .insertAfter( self.$panels[i - 1] || self.element );
                        $panel.data('destroy.tabs', true);
                    }
                    self.$panels = self.$panels.add( $panel );
                }
                // invalid tab href
                else
                    o.disabled.push(i + 1);
            });

            if (init) {

                // attach necessary classes for styling if not present
                $(this.element).hasClass(o.navClass) || $(this.element).addClass(o.navClass);
                this.$panels.each(function() {
                    var $this = $(this);
                    $this.hasClass(o.panelClass) || $this.addClass(o.panelClass);
                });

                // Try to retrieve selected tab:
                // 1. from fragment identifier in url if present
                // 2. from cookie
                // 3. from selected class attribute on <li>
                // 4. otherwise use given "selected" option
                // 5. check if tab is disabled
                this.$tabs.each(function(i, a) {
                    if (location.hash) {
                        if (a.hash == location.hash) {
                            o.selected = i;
                            // prevent page scroll to fragment
                            //if (($.browser.msie || $.browser.opera) && !o.remote) {
                            if ($.browser.msie || $.browser.opera) {
                                var $toShow = $(location.hash), toShowId = $toShow.attr('id');
                                $toShow.attr('id', '');
                                setTimeout(function() {
                                    $toShow.attr('id', toShowId); // restore id
                                }, 500);
                            }
                            scrollTo(0, 0);
                            return false; // break
                        }
                    } else if (o.cookie) {
                        var index = parseInt($.cookie('ui-tabs' + $.data(self.element)),10);
                        if (index && self.$tabs[index]) {
                            o.selected = index;
                            return false; // break
                        }
                    } else if ( self.$lis.eq(i).hasClass(o.selectedClass) ) {
                        o.selected = i;
                        return false; // break
                    }
                });

                // highlight selected tab
                this.$panels.addClass(o.hideClass);
                this.$lis.removeClass(o.selectedClass);
                if (o.selected !== null) {
                    this.$panels.eq(o.selected).show().removeClass(o.hideClass); // use show and remove class to show in any case no matter how it has been hidden before
                    this.$lis.eq(o.selected).addClass(o.selectedClass);
                }

                // load if remote tab
                var href = o.selected !== null && $.data(this.$tabs[o.selected], 'load.tabs');
                if (href)
                    this.load(o.selected);

                // Take disabling tabs via class attribute from HTML
                // into account and update option properly...
                o.disabled = $.unique(o.disabled.concat(
                    $.map(this.$lis.filter('.' + o.disabledClass),
                        function(n, i) { return self.$lis.index(n); } )
                )).sort();
                
                // clean up to avoid memory leaks in certain versions of IE 6
                $(window).bind('unload', function() {
                    self.$tabs.unbind('.tabs');
                    self.$lis = self.$tabs = self.$panels = null;
                });

            }

            // disable tabs
            for (var i = 0, li; li = this.$lis[i]; i++)
                $(li)[$.inArray(i, o.disabled) != -1 && !$(li).hasClass(o.selectedClass) ? 'addClass' : 'removeClass'](o.disabledClass);

            // reset cache if switching from cached to not cached
            if (o.cache === false)
                this.$tabs.removeData('cache.tabs');
            
            // set up animations
            var hideFx, showFx, baseFx = { 'min-width': 0, duration: 1 }, baseDuration = 'normal';
            if (o.fx && o.fx.constructor == Array)
                hideFx = o.fx[0] || baseFx, showFx = o.fx[1] || baseFx;
            else
                hideFx = showFx = o.fx || baseFx;

            // reset some styles to maintain print style sheets etc.
            var resetCSS = { display: '', overflow: '', height: '' };
            if (!$.browser.msie) // not in IE to prevent ClearType font issue
                resetCSS.opacity = '';

            // Hide a tab, animation prevents browser scrolling to fragment,
            // $show is optional.
            function hideTab(clicked, $hide, $show) {
                $hide.animate(hideFx, hideFx.duration || baseDuration, function() { //
                    $hide.addClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
                    if ($.browser.msie && hideFx.opacity)
                        $hide[0].style.filter = '';
                    if ($show)
                        showTab(clicked, $show, $hide);
                });
            }

            // Show a tab, animation prevents browser scrolling to fragment,
            // $hide is optional.
            function showTab(clicked, $show, $hide) {
                if (showFx === baseFx)
                    $show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox cause by gap between showing and hiding the tab panels
                $show.animate(showFx, showFx.duration || baseDuration, function() {
                    $show.removeClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
                    if ($.browser.msie && showFx.opacity)
                        $show[0].style.filter = '';

                    // callback
                    $(self.element).triggerHandler('tabsshow', [self.ui(clicked, $show[0])], o.show);

                });
            }

            // switch a tab
            function switchTab(clicked, $li, $hide, $show) {
                /*if (o.bookmarkable && trueClick) { // add to history only if true click occured, not a triggered click
                    $.ajaxHistory.update(clicked.hash);
                }*/
                $li.addClass(o.selectedClass)
                    .siblings().removeClass(o.selectedClass);
                hideTab(clicked, $hide, $show);
            }

            // attach tab event handler, unbind to avoid duplicates from former tabifying...
            this.$tabs.unbind('.tabs').bind(o.event, function() {

                //var trueClick = e.clientX; // add to history only if true click occured, not a triggered click
                var $li = $(this).parents('li:eq(0)'),
                    $hide = self.$panels.filter(':visible'),
                    $show = $(this.hash);

                // If tab is already selected and not unselectable or tab disabled or 
                // or is already loading or click callback returns false stop here.
                // Check if click handler returns false last so that it is not executed
                // for a disabled or loading tab!
                if (($li.hasClass(o.selectedClass) && !o.unselect)
                    || $li.hasClass(o.disabledClass) 
                    || $(this).hasClass(o.loadingClass)
                    || $(self.element).triggerHandler('tabsselect', [self.ui(this, $show[0])], o.select) === false
                    ) {
                    this.blur();
                    return false;
                }

                self.options.selected = self.$tabs.index(this);

                // if tab may be closed
                if (o.unselect) {
                    if ($li.hasClass(o.selectedClass)) {
                        self.options.selected = null;
                        $li.removeClass(o.selectedClass);
                        self.$panels.stop();
                        hideTab(this, $hide);
                        this.blur();
                        return false;
                    } else if (!$hide.length) {
                        self.$panels.stop();
                        var a = this;
                        self.load(self.$tabs.index(this), function() {
                            $li.addClass(o.selectedClass).addClass(o.unselectClass);
                            showTab(a, $show);
                        });
                        this.blur();
                        return false;
                    }
                }

                if (o.cookie)
                    $.cookie('ui-tabs' + $.data(self.element), self.options.selected, o.cookie);

                // stop possibly running animations
                self.$panels.stop();

                // show new tab
                if ($show.length) {

                    // prevent scrollbar scrolling to 0 and than back in IE7, happens only if bookmarking/history is enabled
                    /*if ($.browser.msie && o.bookmarkable) {
                        var showId = this.hash.replace('#', '');
                        $show.attr('id', '');
                        setTimeout(function() {
                            $show.attr('id', showId); // restore id
                        }, 0);
                    }*/

                    var a = this;
                    self.load(self.$tabs.index(this), $hide.length ? 
                        function() {
                            switchTab(a, $li, $hide, $show);
                        } :
                        function() {
                            $li.addClass(o.selectedClass);
                            showTab(a, $show);
                        }
                    );

                    // Set scrollbar to saved position - need to use timeout with 0 to prevent browser scroll to target of hash
                    /*var scrollX = window.pageXOffset || document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft || 0;
                    var scrollY = window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop || 0;
                    setTimeout(function() {
                        scrollTo(scrollX, scrollY);
                    }, 0);*/

                } else
                    throw 'jQuery UI Tabs: Mismatching fragment identifier.';

                // Prevent IE from keeping other link focussed when using the back button
                // and remove dotted border from clicked link. This is controlled in modern
                // browsers via CSS, also blur removes focus from address bar in Firefox
                // which can become a usability and annoying problem with tabsRotate.
                if ($.browser.msie)
                    this.blur();

                //return o.bookmarkable && !!trueClick; // convert trueClick == undefined to Boolean required in IE
                return false;

            });

            // disable click if event is configured to something else
            if (!(/^click/).test(o.event))
                this.$tabs.bind('click.tabs', function() { return false; });

        },
        add: function(url, label, index) {
            if (index == undefined) 
                index = this.$tabs.length; // append by default

            var o = this.options;
            var $li = $(o.tabTemplate.replace(/#\{href\}/, url).replace(/#\{label\}/, label));
            $li.data('destroy.tabs', true);

            var id = url.indexOf('#') == 0 ? url.replace('#', '') : this.tabId( $('a:first-child', $li)[0] );

            // try to find an existing element before creating a new one
            var $panel = $('#' + id);
            if (!$panel.length) {
                $panel = $(o.panelTemplate).attr('id', id)
                    .addClass(o.panelClass).addClass(o.hideClass);
                $panel.data('destroy.tabs', true);
            }
            if (index >= this.$lis.length) {
                $li.appendTo(this.element);
                $panel.appendTo(this.element.parentNode);
            } else {
                $li.insertBefore(this.$lis[index]);
                $panel.insertBefore(this.$panels[index]);
            }
            
            o.disabled = $.map(o.disabled,
                function(n, i) { return n >= index ? ++n : n });
                
            this.tabify();

            if (this.$tabs.length == 1) {
                 $li.addClass(o.selectedClass);
                 $panel.removeClass(o.hideClass);
                 var href = $.data(this.$tabs[0], 'load.tabs');
                 if (href)
                     this.load(index, href);
            }

            // callback
            $(this.element).triggerHandler('tabsadd',
                [this.ui(this.$tabs[index], this.$panels[index])], o.add
            );
        },
        remove: function(index) {
            var o = this.options, $li = this.$lis.eq(index).remove(),
                $panel = this.$panels.eq(index).remove();

            // If selected tab was removed focus tab to the right or
            // in case the last tab was removed the tab to the left.
            if ($li.hasClass(o.selectedClass) && this.$tabs.length > 1)
                this.select(index + (index + 1 < this.$tabs.length ? 1 : -1));

            o.disabled = $.map($.grep(o.disabled, function(n, i) { return n != index; }),
                function(n, i) { return n >= index ? --n : n });

            this.tabify();

            // callback
            $(this.element).triggerHandler('tabsremove',
                [this.ui($li.find('a')[0], $panel[0])], o.remove
            );
        },
        enable: function(index) {
            var o = this.options;
            if ($.inArray(index, o.disabled) == -1)
                return;
                
            var $li = this.$lis.eq(index).removeClass(o.disabledClass);
            if ($.browser.safari) { // fix disappearing tab (that used opacity indicating disabling) after enabling in Safari 2...
                $li.css('display', 'inline-block');
                setTimeout(function() {
                    $li.css('display', 'block');
                }, 0);
            }

            o.disabled = $.grep(o.disabled, function(n, i) { return n != index; });

            // callback
            $(this.element).triggerHandler('tabsenable',
                [this.ui(this.$tabs[index], this.$panels[index])], o.enable
            );

        },
        disable: function(index) {
            var self = this, o = this.options;
            if (index != o.selected) { // cannot disable already selected tab
                this.$lis.eq(index).addClass(o.disabledClass);

                o.disabled.push(index);
                o.disabled.sort();

                // callback
                $(this.element).triggerHandler('tabsdisable',
                    [this.ui(this.$tabs[index], this.$panels[index])], o.disable
                );
            }
        },
        select: function(index) {
            if (typeof index == 'string')
                index = this.$tabs.index( this.$tabs.filter('[href$=' + index + ']')[0] );
            this.$tabs.eq(index).trigger(this.options.event);
        },
        load: function(index, callback) { // callback is for internal usage only
            
            var self = this, o = this.options, $a = this.$tabs.eq(index), a = $a[0],
                    bypassCache = callback == undefined || callback === false, url = $a.data('load.tabs');

            callback = callback || function() {};
            
            // no remote or from cache - just finish with callback
            if (!url || ($.data(a, 'cache.tabs') && !bypassCache)) {
                callback();
                return;
            }

            // load remote from here on
            if (o.spinner) {
                var $span = $('span', a);
                $span.data('label.tabs', $span.html()).html('<em>' + o.spinner + '</em>');
            }
            var finish = function() {
                self.$tabs.filter('.' + o.loadingClass).each(function() {
                    $(this).removeClass(o.loadingClass);
                    if (o.spinner) {
                        var $span = $('span', this);
                        $span.html($span.data('label.tabs')).removeData('label.tabs');
                    }
                });
                self.xhr = null;
            };
            var ajaxOptions = $.extend({}, o.ajaxOptions, {
                url: url,
                success: function(r, s) {
                    $(a.hash).html(r);
                    finish();
                    
                    // This callback is required because the switch has to take
                    // place after loading has completed.
                    callback();

                    if (o.cache)
                        $.data(a, 'cache.tabs', true); // if loaded once do not load them again

                    // callback
                    $(self.element).triggerHandler('tabsload',
                        [self.ui(self.$tabs[index], self.$panels[index])], o.load
                    );

                    o.ajaxOptions.success && o.ajaxOptions.success(r, s);
                }
            });
            if (this.xhr) {
                // terminate pending requests from other tabs and restore tab label
                this.xhr.abort();
                finish();
            }
            $a.addClass(o.loadingClass);
            setTimeout(function() { // timeout is again required in IE, "wait" for id being restored
                self.xhr = $.ajax(ajaxOptions);
            }, 0);

        },
        url: function(index, url) {
            this.$tabs.eq(index).removeData('cache.tabs').data('load.tabs', url);
        },
        destroy: function() {
            var o = this.options;
            $(this.element).unbind('.tabs')
                .removeClass(o.navClass).removeData('tabs');
            this.$tabs.each(function() {
                var href = $.data(this, 'href.tabs');
                if (href)
                    this.href = href;
                var $this = $(this).unbind('.tabs');
                $.each(['href', 'load', 'cache'], function(i, prefix) {
                      $this.removeData(prefix + '.tabs');
                });
            });
            this.$lis.add(this.$panels).each(function() {
                if ($.data(this, 'destroy.tabs'))
                    $(this).remove();
                else
                    $(this).removeClass([o.selectedClass, o.unselectClass,
                        o.disabledClass, o.panelClass, o.hideClass].join(' '));
            });
        }
    });

})(jQuery);

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
ui.tabs.css

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}

/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
    font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
}
.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin: 0 0 0 1px;
    min-width: 84px; /* be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
    display: block;
    padding: 0 10px;
    background: url(tab.png) no-repeat;
}
.ui-tabs-nav a {
    margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    color: #27537a;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    color: #000;
}
.ui-tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
    padding-bottom: 1px;
}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
    background-position: 100% -150px;
}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {
    background-position: 100% -100px;
}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
    background-position: 0 -50px;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
    background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-panel {
    border-top: 1px solid #97a5b0;
    padding: 1em 8px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}

このサンプルを編集して試してみる!

タブを表示するには、div要素(tabs)にul/li要素を配置します。タブはli要素にanchor要素を追加して表示します。タブのコンテンツはdiv要素(tab1)に記述します。このサンプルで使用しているJavaScript、CSS、Imageなどはここからダウンロードしてください。

$('#tabs > ul').tabs();

<div id="tabs">
  <ul>
    <li><a href="#tab1"><span>tab1</span></a></li>
  </ul>
</div>
<div id="tab1">
 ここにtab1のコンテンツを記述・・・
</div>

JavaScriptを使い倒せ! Ajaxを実装するための基礎知識と実践サンプルを一挙公開中...

jQuery UI Tabs(Simple tabs)