前端开发 \ jQuery \ jQuery标签页 代码非常简洁

jQuery标签页 代码非常简洁

总点击105
简介:自己整理的一个jQuery标签页代码,非常简单实用(效果如下图)。 <html> <head>


自己整理的一个jQuery标签页代码,非常简单实用(效果如下图)。

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>


意见反馈 常见问题 官方微信 返回顶部