jquery——9滑动门

最新推荐文章于 2021-03-16 22:43:36 发布

inexaustible

最新推荐文章于 2021-03-16 22:43:36 发布

阅读量152

点赞数

分类专栏： Java ee自学

本文链接：https://blog.csdn.net/inexaustible/article/details/103402836

版权

Java ee自学专栏收录该内容

40 篇文章 0 订阅

订阅专栏

滑动门：

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

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

先做出以下效果图:

实现的功能：

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

静态效果:

<!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>