(^420) ❘ CHAPTER 18 TABS
Styling the Tabbed User Interface
Because the Tabs plugin requires either a theme or a custom style sheet to be applied, you need to
examine the markup document after the tabs() method has been executed to see how the Tabs
plugin modifi es the markup. The modifi ed markup document is presented in the following example,
which is Example 8-2 in the source code download materials:<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Tabs Plugin</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 18-2.js'></script>
<link href='Example 18-2.css' rel='stylesheet' />
</head>
<body>
<div id="exampleTabs"
class="ui-tabs
ui-widget
ui-widget-content
ui-corner-all">
<ul class="ui-tabs-nav
ui-helper-reset
ui-helper-clearfix
ui-widget-header
ui-corner-all"
role="tablist">
<li class="ui-state-default
ui-corner-top"
role="tab"
tabindex="0"
aria-controls="exampleTabFirst"
aria-labelledby="ui-id-1"
aria-selected="true">
<a href="#exampleTabFirst"
class="ui-tabs-anchor"
role="presentation"
tabindex="-1"
id="ui-id-1">
<span>First Tab</span>
</a>
</li>
<li class="ui-state-default
ui-corner-top"
role="tab"
tabindex="-1"
aria-controls="exampleTabSecond"
aria-labelledby="ui-id-2"
aria-selected="false">
<a href="#exampleTabSecond"
class="ui-tabs-anchor"