jquery 点击切换div 

<!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>

　　

posted @ 2017-10-26 15:13  拈花醉  阅读(1028)  评论(0)  编辑  收藏  举报