<!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 type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#tabs{zoom:1;clear:both;padding:.5em 1em;padding-bottom:0;margin:0;background:black;color:#aaaaaa;}
#tabs after{content:'.';visibility:hidden;display:block;clear:both;height:0;}
#tabs li{float:left;}
.active{background:white;color:black;font-weight:bold;}
#panes{border:1px solid black;font-weight:bold;}
</style>
</HEAD>
<BODY>
<ul id="tabs">
<li>按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
</ul>
<div id="panes">
<div>窗体1</div>
<div>窗体2</div>
<div>窗体3</div>
</div>
<script language="JavaScript">
$("#panes>div").hide().eq(0).show();
var current=$("#tabs>li").eq(0).addClass("active");
$("#tabs>li").each(function(i){
$(this).click(function(){
$("#panes>div") .hide().eq(i).show();
current.removeClass('active');
current=$(this);
current.addClass('active');
});
});
</script>
</BODY>
</HTML>