滑动门：

点击话费,只有话费显示,其它的隐藏;

点击机票,只有机票显示,其它的隐藏；

先做出以下效果图:

实现的功能：

  1. 点击机票,机票在四个链接中排第二个,需要让第二个div出来,其他的隐藏;
  2. 点击机票,机票选中了,让机票有一个边框,话费上面的边框去掉

静态效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_11_demo</title>
    <style type="text/css">
            div
            {
                margin-top:10px;
                background-color: red; 
                width: 200px;
                height: 200px;
                /* 超出时,自动出现滚动条 */
                overflow-y: scroll;
            }
            a
            {
                margin-left: 10px;
            }

.active
            {
                border: 1px solid blue;
            }
        </style>
</head>
<body>
    <a href="" class="active">话费</a><a href="">机票</a><a href="">酒店</a><a href="">游戏</a>
        <div>
            这是话费
            契丹人萧远山携妻儿途经雁门关时，遭中原武林豪杰围攻，血战中萧远山妻子被杀，萧远山悲痛欲绝，在石壁上写下遗书后抱妻跳崖，抛上未死之子--乔峰。三十年后，乔峰率丐帮弟子在雁门关伏击辽兵，截获通敌信函，立下大功。姑苏慕容复勾结宋官购买军火，被骗，杀之，更愁于复燕大业。洛阳花会上，丐帮副帮主马大元之妻康敏，赢得所有人的目光，唯独乔峰不看其一眼。帮主汪剑通有意传位与乔峰，要乔峰孤身赶赴云南分舵，打退四大恶人，完成最后考验。大理镇南王世子段誉偶遇无量剑派与神农帮厮斗，上前劝阻，被擒，钟灵放
        </div>
        <div style="display: none">这是机票
            洞中，段誉偶得北冥神功和凌波微步两部武功秘笈。万劫谷，段誉请钟灵母亲甘宝宝前去救钟灵，惹怒谷主钟万仇，甘让段誉将钟灵的生辰八字交与其父段正淳，求段正淳去救钟灵，并指引段誉向木婉清借马。闻听有人害木婉清，段誉返回相告，与木婉清逃脱仇人追击。段誉求木婉清救钟
        </div>
        <div style="display: none">
            这是酒店
            答应娶木婉清为妻，鳄神再次出现，逼段誉拜其为师，段誉不从，鳄神将木婉清抓走，段誉亦被寻上山来的左子穆抓回无量宫。段誉练成"北冥神功"和"凌波微步"后逃走，途中误食莽牯朱蛤，从此百毒不侵。朱丹臣、巴天石寻段誉而来，与三大恶人交手。段誉寻上崖来，木婉清激</div>
        <div style="display: none">
            这是游戏
            正淳认出木婉清乃自己之女，师父秦红棉实为其母。得知段誉乃自己哥哥，木婉清悲痛欲绝。秦红棉来带木婉清走，段正淳挽留，甘宝宝带三大恶人赶到，抓走段誉。段正淳留下甘宝宝、秦红棉，问万劫谷所在，刀白凤引钟万仇前来索妻，众人约定三日之内拜谷救段誉。
        </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_11_demo</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style type="text/css">
            div
            {
                margin-top:10px;
                background-color: red; 
                width: 200px;
                height: 200px;
                /* 超出时,自动出现滚动条 */
                overflow-y: scroll;
            }
            a
            {
                margin-left: 10px;
            }

.active
            {
                border: 1px solid blue;
            }
    </style>    
    <script type="text/javascript">
        /*让页面一加载的时候就执行 */
        $(function () {
            console.info("==让页面一加载的时候就执行==");
            /*
                为所有的a链接绑定事件
                on
                bind
                click(指定的事件)

取到为谁绑定的元素（为所有的a链接绑定事件）

选择器：
                  元素：元素名
                  类：.
                  id：#
                  父子：空格（后代，孩子-->孙子）或者>(孩子)
                  属性：[]
            */

/*关于a链接样式的问题，思路和div显示的思路一样
                先把a链接上面所有选中的样式去掉（active）
                再为当前a链接增加选中的样式
            */

// $("a").click(function()
            $("a").bind("click mouseover", function()
            {
                /*先把a链接上面所有选中的样式去掉（active）*/
                $("a").removeClass("active");
                /*为当前a链接增加选中的样式*/
                $(this).addClass("active");

/*
                    不管原来显示的是第几个，不考虑，全部隐藏
                    hide：隐藏
                */
                $("div").hide();

/*获取当前点击的a链接元素
                  $(this)
                */
                console.info("==a链接点击了==" + $(this).html());
                /*当前的元素在所有的a链接里面排第几个*/
                var index = $("a").index($(this));
                console.info("==当前a链接的位置==" + $("a").index($(this)));

/*获取所有的div
                  取第index位置的div
                */
                console.info("==当前a链接的位置==" + $("a").eq(index).html());

/*显示
                     写法特别像javase里面的StringBuffer;
                     sb.append().append();
                     链式编程：
                        $("div")：返回值是Jquery对象
                        eq(index)：返回值也是Jquery对象
                  */
                  $("div").eq(index).show();

/*a链接点击的时候本身自带的有效果，将页面跳转到href指定的网址
                      href:什么也没有写，默认就是当前网页；
                      #表示当前页面的顶部，不会刷新
                  */
                return false;
            });
        });
    </script>
</head>
<body>
    <a href="" class="active">话费</a><a href="">机票</a><a href="">酒店</a><a href="">游戏</a>
        <div>
            这是话费
            契丹人萧远山携妻儿途经雁门关时，遭中原武林豪杰围攻，血战中萧远山妻子被杀，萧远山悲痛欲绝，在石壁上写下遗书后抱妻跳崖，抛上未死之子--乔峰。三十年后，乔峰率丐帮弟子在雁门关伏击辽兵，截获通敌信函，立下大功。姑苏慕容复勾结宋官购买军火，被骗，杀之，更愁于复燕大业。洛阳花会上，丐帮副帮主马大元之妻康敏，赢得所有人的目光，唯独乔峰不看其一眼。帮主汪剑通有意传位与乔峰，要乔峰孤身赶赴云南分舵，打退四大恶人，完成最后考验。大理镇南王世子段誉偶遇无量剑派与神农帮厮斗，上前劝阻，被擒，钟灵放
        </div>
        <div style="display: none">这是机票
            洞中，段誉偶得北冥神功和凌波微步两部武功秘笈。万劫谷，段誉请钟灵母亲甘宝宝前去救钟灵，惹怒谷主钟万仇，甘让段誉将钟灵的生辰八字交与其父段正淳，求段正淳去救钟灵，并指引段誉向木婉清借马。闻听有人害木婉清，段誉返回相告，与木婉清逃脱仇人追击。段誉求木婉清救钟
        </div>
        <div style="display: none">
            这是酒店
            答应娶木婉清为妻，鳄神再次出现，逼段誉拜其为师，段誉不从，鳄神将木婉清抓走，段誉亦被寻上山来的左子穆抓回无量宫。段誉练成"北冥神功"和"凌波微步"后逃走，途中误食莽牯朱蛤，从此百毒不侵。朱丹臣、巴天石寻段誉而来，与三大恶人交手。段誉寻上崖来，木婉清激</div>
        <div style="display: none">
            这是游戏
            正淳认出木婉清乃自己之女，师父秦红棉实为其母。得知段誉乃自己哥哥，木婉清悲痛欲绝。秦红棉来带木婉清走，段正淳挽留，甘宝宝带三大恶人赶到，抓走段誉。段正淳留下甘宝宝、秦红棉，问万劫谷所在，刀白凤引钟万仇前来索妻，众人约定三日之内拜谷救段誉。
        </div>
<pre>
    需求：有四个链接，有四个div，点击第n个链接第n个div显示，其他的隐藏起来；
    思路：
        ~为四个链接增加点击事件
        ~当我点击a链接的时候，显示此链接是所有a链接中的第几个
        ~取到所有的div,查询第n（a链接的位置）个位置显示
        ~增加一个滑动的事件（onmouseover）
        ~鼠标在切换的时候，a链接还有一个选的样式
</pre>
</body>
</html>

jquery——9滑动门相关推荐

  1. Easy Slider: 功能强大简单易用的jQuery滑动门插件

    FROM: http://paranp_w_picpath.com/easy-slider/ Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动.它拥有一系列丰富 ...

  2. 代码简洁的上方滑动门(选项卡tab)jquery插件可重复使用，淡入淡出效果(用)

    代码简洁的滑动门(tab)jquery插件调用方法:"#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_c ...

  3. 简洁jQuery滑动门插件

    2019独角兽企业重金招聘Python工程师标准>>> 滑动门,就是传说中的多tab显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. [原创+源码]超简单：基于jQuery实现的选项卡（滑动门）效果

    上篇文章给大家详细的介绍了,如何使用jQuery实现弹出各种窗口效果,引起了很多朋友们得反响,今天再次给大家奉献一篇的新的基于jQuery实现的 "滑动门"(跟随鼠标滑动滑动的ta ...

  5. jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效

    原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm

  6. 基于jQuery实现的 “滑动门”

    基于jQuery实现的 "滑动门"(跟随鼠标滑动滑动的tab选项卡)效果,希望对朋友们有所帮助,下面我们就来分析一下怎样实现一个跟随鼠标滑动滑动的tab选项卡效果.        ...

  7. Mark一下，滑动门插件

    2019独角兽企业重金招聘Python工程师标准>>> Sliding Panels  - 滑动门插件      1)Colorful Sliders With jQuery &am ...

  8. 滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果

    本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...

  9. 很大气的滑动门图片特效

    很大气美观的滑动门图片特效,右侧显示标题,鼠标滑上去左侧的大图片就切换,可为图片增加描述和标题介绍,支持Alt标签和title标签,示例中可能去掉了这些,若需要的话自己再添加上去.本图片的流畅平滑效果 ...

最新文章

  1. Centos 7 下 Corosync + Pacemaker + DRBD + psc + crmsh 实现 mysql 服务高可用
  2. linux 下iptraf监控网卡流量
  3. 概率论-4.1 大数定律
  4. python如何移动图片_python之详细图像仿射变换讲解（图像平移、旋转、缩放、翻转），一文就够了，赶紧码住...
  5. requests 返回的cookies为空_爬虫学习（2）（requests库）
  6. 及时复盘的好处_如何做好2020的年终复盘？
  7. redis查看某一个key的大小_Redis笔记
  8. 了解SQL Server事务日志备份和完整备份的日志序列号
  9. P2207 Photo
  10. 基于Altium Designer的4层PCB板的绘制
  11. 机器学习 什么是Cross Entropy 交叉熵
  12. MySQL增量备份恢复和基于时间点与位置的恢复
  13. 360linux如何卸载,卸载360安全卫士方法
  14. linux服务-mysql主从配置
  15. 通过 debug 检测屏幕颜色显示坏点、低格硬盘等等技巧
  16. MATLAB运行edge函数闪退
  17. Springboot整合Netty，实现Socket通信
  18. CSS中英文换行问题
  19. 计算机原理考研题库,计算机组成原理考研题库_圣考资料网
  20. Windows驱动_WSK驱动之四WSK例程

热门文章

  1. iPhone名词解释
  2. 读书笔记2013第6本：《棋与人生》（三）
  3. 艺术家陈可之在第四届中国青少年艺术展开幕式上寄语少年艺术创作
  4. Windows AD域备份
  5. 推荐（IT）国际会议日程网站
  6. 2018.11.04-3988-地理课(geography)
  7. Win10局域网共享，看不到其他电脑
  8. 个人博客图片存储推荐--又拍云
  9. Windows Server 2003 密钥
  10. cartographer 3d 初试，运行速腾聚创data