直接把代码保存至本地即可运行看效果。<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Javascripters又一力作，AjaxTab</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
body{font-size:12px;color:#666;}
.tab_con .tabs{overflow:auto;zoom:1;position:relative;bottom:-1px;}
.tab_con .tabs li{border:1px solid #999;float:left;cursor:pointer;padding:10px;}
.tab_con .tabs li.on{background:#fff;color:#000;font-size:14px;font-weight:bold;border-bottom:none;}
.tab_con .tab-content, .tab_con .loading{display:none;border:1px solid #999;padding:10px;}
.tab_con .tab-content.on{display:block;}
</style>
</head>
<body>
<div id="tab_con_1" class="tab_con">
<ul class="tabs">
<li class="on">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
<li>tab5</li>
</ul>
<div class="tab-content on">
这是1
</div>
<div class="tab-content">
这是2
</div>
<div class="tab-content">
这是3
</div>
<div class="tab-content">
这是4
</div>
<div class="tab-content">
这是5
</div>
<div class="loading">加载数据中...</div>
</div>
<div>
<textarea style="width:800px;height:640px;border:0;overflow:hidden;">
配置说明:{
con:容器jquery对象，类型为jquery选择器。
eventType:支持的事件类型，如:click,mouseenter,mouseleave,mouseup,mousedown,mouseover,mouseout等等，类型为字符串。
ulSel:tab标签的数组对象，类型为jquery选择器。
contentSel:tab标签对应的内容容器数组对象，类型为jquery选择器。
loadingSel:加载提示框对象，类型为jquery选择器。
onName:当前获得焦点的tab标签及tab标签对应容器的样式名称，类型为字符串。
autoCarousel:是否支持轮播，类型为布尔值。
time:每次轮播的间隔，单位为毫秒，类型为数字。
step:每次轮播的步进值,类型为数字。
data:ajax数据数组，如果是某个元素为对象,须指定对象的url路径及回调函数。具体可见例子。回调函数的第一个参数指服务器发回客户端的数据，回调函数中的this指的是当前对象的实例。如果某个对象为null，表示，该对象不对应任何的ajax。
}
注：配置都不是必填项，都有默认值。所以最简化的例子是new Tab();
$(function(){
new Tab({
con:"#tab_con_1",
eventType:"mouseenter",
autoCarousel:true,
time:2000,
step:2,
data:[null,{
url:"http://m056011.kaixin001.com/g/0.08907483911614433/11220402/ctx",
callback:function(msg){
this.callback.call(this,msg);
}
},
{
url:"http://impservice.fy.youdao.com/imp/request.s?req=http%3A%2F%2Ffanyi.youdao.com%2Ftranslate&adnum=2&syndid=998&rnd=256",
callback:function(msg){
this.callback.call(this,msg);
}
},null,null]
});
});
</textarea>
</div>
<script src="http://files.cnblogs.com/shuicaituya/j1.4.js" type="text/javascript" language="javascript"></script>
<script src="http://files.cnblogs.com/shuicaituya/tabs.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(function(){
new Tab({
con:"#tab_con_1",
eventType:"mouseenter",
autoCarousel:true,
time:2000,
step:2,
data:[null,{
url:"http://m056011.kaixin001.com/g/0.08907483911614433/11220402/ctx",
callback:function(msg){
this.callback.call(this,msg);
}
},
{
url:"http://impservice.fy.youdao.com/imp/request.s?req=http%3A%2F%2Ffanyi.youdao.com%2Ftranslate&adnum=2&syndid=998&rnd=256",
callback:function(msg){
this.callback.call(this,msg);
}
},null,null]
});
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Javascripters又一力作，AjaxTab</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
body{font-size:12px;color:#666;}
.tab_con .tabs{overflow:auto;zoom:1;position:relative;bottom:-1px;}
.tab_con .tabs li{border:1px solid #999;float:left;cursor:pointer;padding:10px;}
.tab_con .tabs li.on{background:#fff;color:#000;font-size:14px;font-weight:bold;border-bottom:none;}
.tab_con .tab-content, .tab_con .loading{display:none;border:1px solid #999;padding:10px;}
.tab_con .tab-content.on{display:block;}
</style>
</head>
<body>
<div id="tab_con_1" class="tab_con">
<ul class="tabs">
<li class="on">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
<li>tab5</li>
</ul>
<div class="tab-content on">
这是1
</div>
<div class="tab-content">
这是2
</div>
<div class="tab-content">
这是3
</div>
<div class="tab-content">
这是4
</div>
<div class="tab-content">
这是5
</div>
<div class="loading">加载数据中...</div>
</div>
<div>
<textarea style="width:800px;height:640px;border:0;overflow:hidden;">
配置说明:{
con:容器jquery对象，类型为jquery选择器。
eventType:支持的事件类型，如:click,mouseenter,mouseleave,mouseup,mousedown,mouseover,mouseout等等，类型为字符串。
ulSel:tab标签的数组对象，类型为jquery选择器。
contentSel:tab标签对应的内容容器数组对象，类型为jquery选择器。
loadingSel:加载提示框对象，类型为jquery选择器。
onName:当前获得焦点的tab标签及tab标签对应容器的样式名称，类型为字符串。
autoCarousel:是否支持轮播，类型为布尔值。
time:每次轮播的间隔，单位为毫秒，类型为数字。
step:每次轮播的步进值,类型为数字。
data:ajax数据数组，如果是某个元素为对象,须指定对象的url路径及回调函数。具体可见例子。回调函数的第一个参数指服务器发回客户端的数据，回调函数中的this指的是当前对象的实例。如果某个对象为null，表示，该对象不对应任何的ajax。
}
注：配置都不是必填项，都有默认值。所以最简化的例子是new Tab();
$(function(){
new Tab({
con:"#tab_con_1",
eventType:"mouseenter",
autoCarousel:true,
time:2000,
step:2,
data:[null,{
url:"http://m056011.kaixin001.com/g/0.08907483911614433/11220402/ctx",
callback:function(msg){
this.callback.call(this,msg);
}
},
{
url:"http://impservice.fy.youdao.com/imp/request.s?req=http%3A%2F%2Ffanyi.youdao.com%2Ftranslate&adnum=2&syndid=998&rnd=256",
callback:function(msg){
this.callback.call(this,msg);
}
},null,null]
});
});
</textarea>
</div>
<script src="http://files.cnblogs.com/shuicaituya/j1.4.js" type="text/javascript" language="javascript"></script>
<script src="http://files.cnblogs.com/shuicaituya/tabs.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(function(){
new Tab({
con:"#tab_con_1",
eventType:"mouseenter",
autoCarousel:true,
time:2000,
step:2,
data:[null,{
url:"http://m056011.kaixin001.com/g/0.08907483911614433/11220402/ctx",
callback:function(msg){
this.callback.call(this,msg);
}
},
{
url:"http://impservice.fy.youdao.com/imp/request.s?req=http%3A%2F%2Ffanyi.youdao.com%2Ftranslate&adnum=2&syndid=998&rnd=256",
callback:function(msg){
this.callback.call(this,msg);
}
},null,null]
});
});
</script>
</body>
</html>
注：由于火狐不支持本地跨域ajax,可使用ie浏览器浏览，如果配置的是同一域下，各浏览器则都支持完好。
运行不起来，
需要JQUERY吗
这里也改了：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />