jQuery写的tab切换（Neatstudio.COM）

花了半小时左右写了这个小东西。没有封装成插件。因为我觉得性能不好。主要就是想试一下$('xxx').data()这个方法。
在页面不大的时候，其实真的可以用这个方法来缓存ajax的数据。

JavaScript代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://localhost/jquery.js"></script>
<style>
.mytab{border:1px solid #888;cursor:pointer;}
.showdiv{border:1px solid #888;cursor:pointer;}
</style>
</head>
<body>
<div>
<span class="mytab">Tab1</span>
<span class="mytab">Tab2</span>
</div>
<div id='tab-1' style="display:none" rel="http://localhost/test.php" class="showdiv">
</div>
<div id='tab-2' style="display:none" class="showdiv">
ddssasdflkjasdflkjalsdkfj
</div>
<input type='button' value="click" id='clickid'>
<script language="JavaScript">
<!--
$(document).ready(function(){
$('body').append("<div id='testData' />");
$('.mytab').each(function(i){
$(this).click(function(){
var j = i+1;
var id = 'tab-' + j;
var src = $('#'+id).attr('rel');
if( src ){
if($('testData').data('data_'+id)){
return ;
}else{
$.get( src ,function(data){
if(data){
$('testData').data('data_'+id,data);
$('#'+id).html(data);
}
});
}
}
var len = $('.mytab').length;
for (var s=1;s<=len ; s++){
s == j ? $('#'+id).show() : $('#tab-'+s).hide();
}
});
});
});
//-->
</script>
</body>
</html>

纯实现，无性能无效果。只是可以运行而己
目前我就在tab的切换和Div的显示方面没有想到更好的。。。其实如果显示内容的div不用ID也可以这样写：

JavaScript代码

避免了循环

随便写写。。。也请随便看看

易栈网-膘叔