<!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. 全局Timestamp管理器 检测js执行时间

    随手写了个小工具,主要为了测试不同混淆程度的javascript脚本的加载速度1. [代码]Timestamp.js (function() { if (typeof this.Timestamp = ...

  2. sql 指删除表，改表名，改字段名

    删除表: DECLARE @Table NVARCHAR(30) DECLARE tmpCur CURSOR FOR SELECT name FROM sys.objects WHERE TYPE=' ...

  3. SLC-测试-Postman：Postman 工具

    ylbtech-SLC-测试-Postman:Postman 工具 1.返回顶部 1. 一.Request 请求 Request 请求,我们只介绍常用的四种:GET.POST.PUT.DELETE,其 ...

  4. Hibernate4 拦截器(Interceptor) 实现实体类增删改的日志记录

    转自:https://blog.csdn.net/he90227/article/details/44783099 开发应用程序的过程中,经常会对一些比较重要的数据修改都需要写日志.在实际工作的工程中 ...

  5. idea清除缓存和索引

    转自:https://blog.csdn.net/mzy755423868/article/details/80559381

  6. git合并相关问题(copy)

    [说明:资料来自http://gitbook.liuhui998.com/3_3.html] 一个Git仓库可以维护很多开发分支.现在我们来创建一个新的叫”experimental”的分支: $ gi ...

  7. iOS 切割圆角图片、图片文件格式判断

    1.切割圆角图片 // 性能不好,适合圆角图形数量比较少的情况 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMak ...

  8. ROS学习笔记五：创建和使用ROS msg和srv

    1 msg和srv简介 1.1 msg文件 msg文件就是一个简单的text文件,其中每行有一个类型和名称,可用的类型如下: int8, int16, int32, int64 (plus uint* ...

  9. UCOSII学习 - 创建任务

    本人刚刚学习UCOSII,平台为正点原子的STM32F103战舰开发板,写这篇博客主要是为了学习UCOSII,也方便自己能够一点一点的进步,话不多说直入正题吧. 第一步:在STM32上移植好UCOSI ...

  10. Lightoj 1071 - Baker Vai （双线程DP）

    题目连接: http://lightoj.com/volume_showproblem.php?problem=1071 题目大意: 一个n*m的格子,Baker Vai要从(1,1)到(n,m)再回 ...