Tabs 滑动显示
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script><script src="js/js/tabs.js" type="text/javascript"></script>
<link type="text/css" href="css/tabs.css" rel="Stylesheet" />
</head>
<body>
<div class="tab">
<p>
<span id="tab1">相关文章</span>
<span id="tab2">本月热门</span>
<span id="tab3">点击排行</span>
</p>
<ul class="tab1">
<li><a href="http://www.163.com">相关文章</a></li>
<li>相关文章</li>
<li>相关文章</li>
</ul>
<ul class="tab2">
<li>本月热门</li>
<li>本月热门</li>
</ul>
<ul class="tab3">
<li>点击排行</li>
<li>点击排行</li>
<li>点击排行</li>
<li>点击排行</li>
<li>点击排行</li>
</ul>
</div>
</body>
</html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(function() {
$(".tab span:first").addClass("current");
$(".tab ul:not(:first)").hide();
$(".tab span").mousemove(function() {
$(".tab span").removeClass("current");
$(this).addClass("current");
$(".tab ul").hide();
$("." + $(this).attr("id")).show();
})
})
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.tab{ background-color:#fafafa; margin:5px 8px; padding:5px 10px;}
.tab p{ border-bottom:1px solid #cccccc; font-weight:bold ; padding:0px 10px 2px;}
.tab p span{ background-color:#efefef; border:1px solid #cccccc; cursor:pointer; margin-right:6px; padding:2px 5px;}
.tab li{ border:1px double #cccccc; padding-bottom:3px; margin:5px 0}
.tab .tab2,.tab .tab3{ display:none;}
.tab p span.current{ background-color:#fafafa; border-bottom-color:#fafafa;}