<!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" />
<title>DL-Tabs</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function mainmenu(){
$(".menu dl dt").each(
function(){
$(this).click(function(){
$(".menu dl dt").removeClass("current");
$(this).addClass("current");
var idt = $(".menu dl dt").index(this);
$(".menu dl dd").hide();
$(".menu dl dd:eq("+idt+")").show();
})
})
}
$(function(){
mainmenu();
});
</script>
<style type="text/css">
*{ margin:0; padding:0; border:0; font-size:12px;}
body{ padding:2em;}
.menu{ width:540px;}
.menu dl dt{ float:left; margin-right:3px; text-align:center; width:73px;line-height:27px; cursor:pointer; background: url(12908191.gif) no-repeat scroll -371px -297px; position:relative; z-index:5;}
.menu dl dd{ border:solid 1px #d4d4d4; height:300px; clear:left; position:relative; top:-5px; z-index:4;}
.menu .current{background: url(12908191.gif) no-repeat scroll -289px -297px;}
.tabs-content{ padding:9px 5px;}
</style>
</head>
<body>
<div class="menu">
<dl>
<dt class="current">One</dt>
<dt>Two</dt>
<dt>Three</dt>
<dd>
<div class="tabs-content">我这里是第一个</div>
</dd>
<dd style="display:none;">
<div class="tabs-content">我这里是第二个</div>
</dd>
<dd style="display:none;">
<div class="tabs-content">我这里是第三个</div>
</dd>
</dl>
</div>
</body>
</html>