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

　　

jquery 点击切换div的更多相关文章

  1. jquery中点击切换的实现

    项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...

  2. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  3. jquery点击切换背景色

    刚在自己的前端技术群里有个小伙伴儿问到这个问题,点击的时候进行红色背景和白色背景的切换,然后我就临时想到了一个解决方法,在这里记录一下吧,希望还有别的刚学习前端的小伙伴儿能用到,大神就请绕道咯!另外提 ...

  4. jquery点击目标DIV以外关闭效果

    $(function(){ $(".cover").hide(); $("#call").click(function(){ console.log(" ...

  5. jquery点击切换在点击切换

    <div style=" position: absolute; top: 6rem; right: 4rem;" id="hides" > < ...

  6. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  7. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  8. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  9. 使用jquery点击一个实现button或连接,进行以下div显示,在点击隐藏

    jquery代码: <script type="text/javascript" src="js/jquery-1.7.2.js"></scr ...

随机推荐

  1. eclipse中jsp页面乱码问题

    若上述位置均改为utf-8之后,页面展示扔为乱码,检查jsp页面是否有编码说明

  2. oracle中的sys用户(修改密码)/////Oracle删除表空间的同时删除数据文件 ///// Oracle中如何保证用户只有一个session登录

    oracle中的sys用户(修改密码) (2011-07-01 09:18:11) 转载▼ 标签: it 分类: oracle 概念: SYS用户是Oracle中权限最高的用户,而SYSTEM是一个用 ...

  3. jqplot配置参考

    jqPlot整的来说有三个地方需要配置.格式如:    $.jqplot(‘target’, data, options);target:要显示的位置.data:显示的数据.options:其它配置 ...

  4. c语言和oc对比

    1)源文件对比 思考&实现1: 1)在C语言中,我们遇到不同后缀的文件有哪些? .c .o .out .h 2.基本语法对比 1)数据类型对比学习 2)变量的定义对比 3)流程控制语句对比 1 ...

  5. C# ListView 列宽调整 刷新

    /*********************************************************************** * C# ListView 列宽调整 刷新 * 说明: ...

  6. 第十八周 Leetcode 72. Edit Distance(HARD) O(N^2)DP

    Leetcode72 看起来比较棘手的一道题(列DP方程还是要大胆猜想..) DP方程该怎么列呢? dp[i][j]表示字符串a[0....i-1]转化为b[0....j-1]的最少距离 转移方程分三 ...

  7. JS 对java返回的json格式的数据处理

    var dataObj=eval("("+res+")"); alert(dataObj.billBuy) //res是如下的数据 {"billBuy ...

  8. Mysql数据库基础操作

    Mysql数据库基础操作 在mysql数据库中开启使用tab键补全功能 1)修改主配置文件/etc/mysql/my.cnf(mysql和mariadb目录有些不同) vim /etc/mysql/m ...

  9. bzoj 1103: [POI2007]大都市meg【dfs序+树状数组】

    很明显的暗示,就是在树的dfs序上维护树状数组,加减的时候差分即可 #include<iostream> #include<cstdio> #include<cstrin ...

  10. 洛谷 P3357 最长k可重线段集问题【最大流】

    pre:http://www.cnblogs.com/lokiii/p/8435499.html 和最长k可重区间集问题差不多,也就是价值的计算方法不一样,但是注意这里可能会有x0==x1的情况也就是 ...