<!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. java集合的关系

    在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对抽象数据类型操作的API,而这是我们常用的且在数据结 ...

  2. YTU 2983: 小明的生机！

    2983: 小明的生机! 时间限制: 1 Sec  内存限制: 128 MB 提交: 16  解决: 2 题目描述 小明陷入一个充满陷阱的密道之中,现在他要逃脱这里!到达密道的指定位置即可离开这处绝境 ...

  3. myeclipse 8.6安装SVN插件

    方法二: 安装subclipse, SVN 插件   1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigris.org,    2.从中解压出features与plug ...

  4. 数据库sqlite3的使用-基本语法

    一.SQL语句 如果要在程序运行过程中操作数据库中的数据,那得先学会使用SQL语句 1.什么是SQL SQL(structured query language):结构化查询语言 SQL是一种对关系型 ...

  5. 【HDU 1599】 Find the mincost route

    [题目链接] 点击打开链接 [算法] 弗洛伊德求最小环模板 我们知道,在一个环上,一定有一个有且仅有一个编号最大的点,设这个点为k,起点为i,终点为j,那么 mincost = dist[i][j] ...

  6. 珠宝 jewelry 省选模拟

    n种珠宝.每种各1个.有价格ci元,美度vi.  要求分别输出1元到m元 可买的最大优美度. 整数 :0<n<=10000000, 0<ci<=300,0<=vi< ...

  7. Watir: element_by_xpath 的使用

    b =Watir::IE.new b.goto'http://www.google.com/' txt =b.element_by_xpath("//*[@name='q']") ...

  8. Linux网络协议栈(四)——链路层(1)

    1.接收帧当网络适配器接收到数据帧时,就会触发一个中断,中断处理程序执行一些需要及时处理的任务,然后在下半部进行其它可以延迟的处理.中断处理程序主要进行以下一些操作:(1)    分配sk_buff数 ...

  9. openpyxl操作excel

    [转] openpyxl库可以读写xlsx格式的文件,对于xls旧格式的文件只能用xlrd读,xlwt写来完成了. python有很多模块都是用来操作excel的,比如xlrd,xlwt,pyExce ...

  10. ExtJS 4 MVC Viewport和card布局

    http://ext4all.com/post/a-little-bit-strange-navigation 效果图:  app/view/Viewport.js Ext.define('App.v ...