Seems like the plugin you are using is very basic, and doesn't allow ajax requests.
One solution is to use the load method for externals html files (featured.htm, toprated.html...), but I'm sure there is a better way using ajax request to the server and a preload plugin.
HTML
<html>
<head>
...
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
</head>
<body>
...
<!-- tabs -->
<ul class="css-tabs">
<li><a href="topdownload.htm">top</a></li>
<li><a href="featured.htm">more</a></li>
<li><a class="selected" href="toprated.htm">default</a></li>
<li><a href="latest.htm">free</a></li>
</ul>
<!-- single pane. it is always visible -->
<div class="css-panes">
<div style="display:block">
<!-- loaded content here -->
</div>
</div>
Jquery
Now we use ajax to load external pages using load method getting the href of the link element:
<script>
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if
// you want the page to be loaded every time
if (pane.is(":empty")) {
// load it with a page specified in the tab's href
// attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>
Demo
http://jquerytools.org/demos/tabs/ajax-noeffect.htm
