效果图：
下面是代码部分：
Css：
<style type="text/css">
body{background:url(images/65.jpg) no-repeat fixed center center;}
.clear{clear:both;}
.main-page{margin:200px auto 0 auto;width:700px;height:300px;}
.main-page .left, .main-page .right{float:left;}
.main-page .nav-back{width:60px;height:300px;background:#000;opacity:.3;filter:alpha(opacity=30);}
.main-page .nav{position:relative;margin-top:-300px;width:60px;text-align:center;font-size:14px;font-family:"微软雅黑";color:#fff;}
.main-page .nav div{height:32px;line-height:28px;}
.main-page .nav div.on{background:#0094ea;}
.main-page .right{width:620px;height:300px;margin-left:20px;}
.main-page .content-back{width:620px;height:300px;background:#fff;opacity:.3;}
.main-page .content{position:relative;width:600px;height:280px;margin-top:-300px;padding:10px;overflow:hidden;}
.main-page .content div{width:600px;height:280px;margin-bottom:10px;background:#fff;}
</style>HTML代码:
<div class="main-page"> <div class="left"> <div class="nav-back"></div> <div class="nav"> <div class="on">导航</div> <div>海贼王</div> <div>火影忍者</div> <div>惊奇先生</div> <div>画不良人</div> </div> </div> <div class="right"> <div class="content-back"></div> <div class="content"> <div>玄玄 博客</div> <div>玄玄 博客</div> <div>玄玄 博客</div> <div>玄玄 博客</div> <div>玄玄 博客</div> </div> </div> <div class="clear"></div> </div>
JQuery代码：
//这个一个缺点就是 $this.index() * 290 290应该是动态获取才完美！！不管了。喜欢的自己改吧 哈哈！
//点击事件
$(".main-page .nav div").click(function () {
var $this = $(this);//定义自己
$(".main-page .nav div").removeClass("on");
$(".main-page .nav div").eq($this.index()).addClass("on");//自己加上on
$(".main-page .content div:eq(0)").stop().animate({ "margin-top": -($this.index() * 290) }, 500);//第一个div * 290 往上移就可以实现了。就是这么简单...
});
</script>玄玄 博客 www.blogxuan.com
