用jquery实现网页标签(tab)完美滑动切换效果

效果如下图：

代码如下：

<!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>jquery实现网页标签(tab)切换效果</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.tul li').hover(
function(){
jQuery(this).siblings().removeClass("check");
jQuery(this).addClass("check");
var tid = "#" + jQuery(this).attr('id') + "_cont";
jQuery(tid).siblings().hide();
jQuery(tid).show();
},
function(){}
);
});
</script>
<style type="text/css">
body, ul, li{margin:0;padding:0;}
ul{list-style-type:none;}
ul:after{content:".";display:block;clear:both;font-size:0px;line-height:0px;height:0;visibility:hidden;}
.tul li { width:50px; height:30px; line-height:30px; text-align:center; color:#0c3d66; font-weight:bold; font-size:14px; float:left; color:#2064ae;cursor: hand;!important;cursor: pointer}
.tul .check { background:url(images/tabtitle.jpg) no-repeat; }
.slist { width:210px; height:480px; background:url(images/tabbg.jpg) no-repeat; margin-top:-2px; z-index:-999; }
</style>
</head>
<body>
<ul class="tul">
<li class="check" id="tab1">tab1</li><li id="tab2">tab2</li><li id="tab3">tab3</li>
</ul>
<div>
<div class="slist" id="tab1_cont">
tab1
</div>
<div class="slist" id="tab2_cont" style="display:none;">
tab2
</div>
<div class="slist" id="tab3_cont" style="display:none;">
tab3
</div>
</div>
</body>
</html>

复制代码

附件下载：

tab滑动切换.rar (52.84 KB, 下载次数: 495)