Tabs de navegacion para html

codigo html:

Tab 1
Tab 2
Tab 3

First tab content. Tab contents are called "panes"
Second tab content
Third tab content

Script de java:

// perform JavaScript after the documentis scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});

codigo CSS:
/* root element for tabs */
.tabs{
list-style:none;
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
}

/* single tab */
.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0!important;
list-style-image:none !important;
}

/* link inside the tab. uses a background image */
.tabs a {
background: url(/img/global/tabs.png) no-repeat -652px 0;
font-size:11px;display:block;
height: 30px;
line-height:30px;
width: 111px;
text-align:center;
text-decoration:none;
color:#000;
padding:0px;
margin:0px;
position:relative;
top:1px;
}.tabs a:active {
outline:none;
}

/* when mouse enters the tab move the background image */
.tabs a:hover {
background-position: -652px -31px;
color:#fff;
}

/* active tab uses a classname "current". it's highlight is also done by moving the background image. */
.tabs .current, .tabs .current:hover, .tabs li.current a {
background-position: -652px -62px;
cursor:default!important;
color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
.tabs .w1 { background-position: -519px 0; width:134px; }
.tabs .w1:hover{ background-position: -519px -31px; }
.tabs .w1.current { background-position: -519px -62px; }

/* width 2 */
.tabs .w2 { background-position: -366px -0px; width:154px; }
.tabs .w2:hover {background-position: -366px -31px; }
.tabs .w2.current { background-position: -366px -62px; }

/* width 3 */
.tabs .w3 { background-position: -193px -0px; width:174px; }
.tabs .w3:hover {...