JQUERY伸缩导航
<!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=gb2312" />
<link type="text/css" href="http://blog.163.com/tstone_wj/blog/base.css" rel="stylesheet" />
<script type="text/javascript" src="http://blog.163.com/tstone_wj/blog/jquery.js"></script>
<title>我的空间</title>
<style type="text/css">
.attention{ width:315px; float:left; margin-left:10px; display:inline;}
.attention h3{width:303px; float:left; height:20px; border-top:#ebebeb 1px solid; font-size:12px; padding-top:5px; padding-left:7px; color:#666666; position:relative; cursor:pointer;}
.attention h3 span{ position:absolute; top:5px; right:7px; cursor:pointer;}
.aaa{ background:url(jiantou_xia.jpg) no-repeat; width:15px; height:11px;}
.ccc{ background:url(jiantou_shang.jpg) no-repeat; width:15px; height:16px;}
.attention ul{ float:left; width:310px; border:#0F0 1px solid;}
.attention li{ float:left; width:48px; height:48px; display:block; margin-left:8px;}
.none{ display:none;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(".tttt2").click(function(){
$(".tttt2").find("#aaa").css("background","#f7f7f7");
$(".tttt1").find("#aaa").css("background","#ffffff");
$(".tttt2").find("#fff").addClass("ccc");
$(".tttt2").find("#fff").removeClass("aaa");
$(".tttt1").find("#fff").addClass("aaa");
$(".tttt1").find("#fff").removeClass("ccc");
$(".tttt2").find("ul").removeClass("none");
$(".tttt1").find("ul").addClass("none");
$(".tttt1").find("ul").slideUp();
$(".tttt2").find("ul").slideDown();
});
$(".tttt1").click(function(){
$("#aaa").css("background","#f7f7f7");
$(".tttt2").find("#aaa").css("background","#ffffff");
$("#fff").addClass("ccc");
$("#fff").removeClass("aaa");
$(".tttt2").find("#fff").addClass("aaa");
$(".tttt2").find("#fff").removeClass("ccc");
$(".tttt2").find("ul").addClass("none");
$(".tttt1").find("ul").removeClass("none");
$(".tttt1").find("ul").slideDown();
$(".tttt2").find("ul").slideUp();
})
});
</script>
<div class="attention">
<div class="tttt1">
<h3 id="aaa">关注32<span class="aaa" id="fff" ></span></h3>
<ul>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic3.jpg" width="49" height="47" /></a></li>
</ul>
</div>
<div class="tttt2">
<h3 style=" margin-top:10px;" id="aaa">粉丝66<span class="aaa" id="fff"></span></h3>
<ul class="none">
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
<li><a href="http://blog.163.com/tstone_wj/blog/#"><img src="http://blog.163.com/tstone_wj/blog/pic2.jpg" width="48" height="48" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
posted on 2015-02-25 16:49 nevergiveupzeng 阅读(112) 评论(0) 编辑 收藏 举报
