<!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. RK3288 make otapackage 出错的问题【转】

    本文转载自:http://blog.csdn.net/u010439962/article/details/51734631 Installed file list: out/target/produ ...

  2. tcp/ip网络通讯安全加密方法

    tcp/ip网络通讯安全是一个广受关注的话题,现在也有一些基于tcp/ip加密技术标准如SSL,TLS等.但很多时候编写一些简单的网络通讯把这标准加密应用添加进来乎一下子把程序变得复杂了,而实现自己的 ...

  3. vue 生命周期钩子 过滤器 计算属性

    每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...

  4. 查看html元素绑定的事件与方法 visual Event 插件

    WEB标准提倡结构.表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...

  5. Math对象常用方法（取整细节）

    Math 对象 Math 对象用于执行数学任务. 1.常用属性: 1.E :返回算术常量e,即自然对数的底数(约2.718) 2.PI :返回圆周率,约3.14159 2.常用方法    Math.方 ...

  6. bzoj 2792: [Poi2012]Well【二分+贪心】

    #include<iostream> #include<cstdio> #include<algorithm> using namespace std; const ...

  7. css设置页面全屏背景

    .background { background: url(xxx.png); background-size: 100% 100%; height: 100%; position: fixed; w ...

  8. Ubuntu 18 通过ssh连接远程服务器

    ps -e | grep ssh 查看自己的Ubuntu是否开启ssh服务,如果我们要连其他的,那需要有 ssh-client的进程 如果我们的作为主机,那需要有sshd的进程 相应的安装方法: cl ...

  9. Golang 入门 : 理解并发与并行

    Golang 的语法和运行时直接内置了对并发的支持.Golang 里的并发指的是能让某个函数独立于其他函数运行的能力.当一个函数创建为 goroutine 时,Golang 会将其视为一个独立的工作单 ...

  10. POJ 2255 Tree Recoveryw(二叉树)

    题目原网址:http://poj.org/problem?id=2255 题目中文翻译: Description 小瓦伦丁非常喜欢玩二叉树. 她最喜欢的游戏是用大写字母构造的随机二叉树. 这是她的一个 ...