jquery ajax tabs
HTML
<div id="tabs">
<ul>
<li><a href="#">Preloaded</a></li>
<li><a href="#lol">Tab 1</a></li>
<li><a href="http://jqueryui.com/resources/demos/tabs/ajax/content2.html">Tab 2</a></li>
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
</div>
CSS
/*! jQuery UI - v1.9.2 - 2012-11-23
* http://jqueryui.com
* Includes: jquery.ui.core.css,
.query.ui.accordion.css,
.query.ui.autocomplete.css,
.query.ui.button.css,
.query.ui.datepicker.css,
.query.ui.dialog.css,
.query.ui.menu.css,
.query.ui.progressbar.css,
.query.ui.resizable.css,
.query.ui.selectable.css,
.query.ui.slider.css,
.query.ui.spinner.css,
.query.ui.tabs.css,
.query.ui.tooltip.css,
.query.ui.theme.css
* Copyright 2012 jQuery Foundation and other contributors;
Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-clearfix {
zoom: 1;
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter:Alpha(Opacity=0);
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
zoom: 1;
}
.ui-accordion...
JavaScript
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
});