<!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=utf-8" />
<meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Demo--点击切换</title>
</head>
<body>
<div class="sd_package" id="topPackage">
<a ref="page1" class="active">包裹1</a>
<a ref="page2">包裹2</a>
<a ref="page3">包裹2</a>
</div>
<div class="page-container">
<div id="page1">
<!-- <div class="package_h" ></div> -->
1111
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="page2">
<!-- <div class="package_h"></div> -->
11112222222222222222
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="page3">
<!-- <div class="package_h"></div> -->
1111433333333335
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>
<style>
.package_h{display: none}
.head_fixed {position:fixed;top:0;left:0;z-index:100;}
.sd_package{padding: 6px 3%;border-bottom: 1px solid #000;}
.sd_package a{display: inline-block;padding:0 12px;border: 1px solid #4fc87a;color: #4fc87a;line-height: 30px; font-size: .65rem; margin:3px 10px 4px 0px;border-radius: 2px}
.sd_package a.active{background: #4fc87a;color: #fff}
</style>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function(){
var topPak = 0;
$(document).scroll(function(){
topPak=$(document).scrollTop();
var oWinH=$(window).height();//当前窗口可视区域高度
if(topPak>packageH){
$('#topPackage').addClass('head_fixed');
$('.package_h').show();
}else if(topPak==0){
$('#topPackage').removeClass('head_fixed');
$('.package_h').hide();
}
})
$(".sd_package a").click(function(){
var refAttr = $(this).attr('ref');
$("#"+refAttr).show();
$("#"+refAttr).siblings().hide();
$(".sd_package a").removeClass("active");
$(this).addClass("active");
});
})
</script>