自己整理的一个jQuery标签页代码,非常简单实用(效果如下图)。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery标签页</title>
<style type="text/css">
*{ margin:0; padding:0; list-style:none; }
body{ background-color:#fff; color:#666; font:12px/1.5em "Microsoft YaHei"; }
a{ color:#666; text-decoration:none; }
.wrap{ width:500px; margin:20px auto; border:solid #f3f3f3; border-width:0 1px 1px; }
.tab-head{ background-color:#f3f3f3; height:35px; overflow:hidden; }
.tab-head li{ float:left; }
.tab-head li a{ display:block; width:100px; line-height:35px; text-align:center; }
.tab-head li.active a,.tab-head li a:hover{ border-top:2px solid #016FA8; background-color:#fff; color:#f00; text-decoration:underline; }
.tab-content{ height:100px; padding:10px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//页面载入
$(".tab-content").hide();
$("ul.tab-head li:first").addClass("active").show();
$(".tab-content:first").show();
//单击事件
$("ul.tab-head li").mouseover(function () {
$("ul.tab-head li").removeClass("active");
$(this).addClass("active");
$(".tab-content").hide();
var activeTab = $(this).find("a").attr("name");
$(activeTab).fadeIn();
return false;
});
});
</script>
</head>
<body>
<div class="wrap tab-area">
<ul class="tab-head">
<li><a href="http://phply.blog.163.com/blog/#" name="#tab1">休闲草坪</a></li>
<li><a href="http://phply.blog.163.com/blog/#" name="#tab2">运动草坪</a></li>
<li><a href="http://phply.blog.163.com/blog/#" name="#tab3">人造草坪</a></li>
<li><a href="http://phply.blog.163.com/blog/#" name="#tab4">自然草坪</a></li>
<li><a href="http://phply.blog.163.com/blog/#" name="#tab5">双色草坪</a></li>
</ul>
<div class="tab-body">
<div id="tab1" class="tab-content">休闲草坪 http://www.lyksty.com/</div>
<div id="tab2" class="tab-content">运动草坪 http://www.lyksty.com/</div>
<div id="tab3" class="tab-content">人造草坪 http://www.lyksty.com/</div>
<div id="tab4" class="tab-content">自然草坪 http://www.lyksty.com/</div>
<div id="tab5" class="tab-content">双色草坪 http://www.lyksty.com/</div>
</div>
</div>
</body>
</html>