<!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. XMU 1605 nc与数列 【动态规划】

    1605: nc与数列 Time Limit: 2000 MS  Memory Limit: 64 MBSubmit: 84  Solved: 13[Submit][Status][Web Board ...

  2. mongodb02

    memcached redis : kv数据库(key/value) mongodb 文档数据库,存储的是文档(Bson->json对象二进制化后叫bson,js的二进制对象,引擎是用js实现的 ...

  3. jvm部分知识总结

    1.jvm有三种执行模式,分别是解释执行,混合执行和编译执行,默认情况是混合执行模式. java version " Java(TM) SE Runtime Environment (bui ...

  4. RK平台LCD调试说明【转】

    本文转载自:http://blog.csdn.net/u014770862/article/details/76274951?locationNum=2&fps=1 RK平台LCD调试说明 原 ...

  5. YTU 2905: The Sum of 1...N

    2905: The Sum of 1...N 时间限制: 1 Sec  内存限制: 128 MB 提交: 281  解决: 51 题目描述 Given an integer n,your task i ...

  6. UltraEdit mac破解版

    2018-01-17 增加18.00.0.19破解 去官网下载原载,先运行一次,再在终端里执行下面代码就可以破解完成! printf '\x31\xC0\xFF\xC0\xC3\x90' | dd s ...

  7. artemplate include

    include用于嵌入字模板 {{include 'template_name'}} 子模板 默认共享当前的数据 也可以自己指定数据 {{include 'template_name' templat ...

  8. Mysql数据库介绍、安装和配置文件

    Mysql数据库介绍.安装和配置文件 MySQL数据库介绍 mysql是开源关系型数据库,遵循GPL协议. mysql的特点是性能卓越且服务稳定,开源,无版本限制,成本低,单进程多线程,多用户,基于C ...

  9. winform 自动升级

    自动升级系统OAUS的设计与实现(续) (附最新源码) http://www.cnblogs.com/zhuweisky/p/4209058.html Winform在线更新 http://www.c ...

  10. ThinkPHP3.2.3学习笔记2---模型

    一.模型实例化1.直接实例化可以和实例化其他类库一样实例化模型类,例如:$User = new \Home\Model\UserModel();$Info = new \Admin\Model\Inf ...