jQuery——事件的移入移出小练习Tab选项卡

最新推荐文章于 2021-07-18 17:43:03 发布

野生小米椒

最新推荐文章于 2021-07-18 17:43:03 发布

阅读量323

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1037490413/article/details/102759649

版权

jQuery 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       *{
        margin: 0;
        padding: 0;
       }
       .box{
           width: 550px;
           height: 298px;
           border: 1px soli #000;
           margin: 50px auto;
       }
      
       .nav>li{
           list-style: none;
           width: 110px;
           height: 50px;
           background-color: rgb(99, 156, 99);
           text-align: center;
           line-height: 50px;
           float: left;
       }
       .nav>.current{/*.nav li的权重是20，如果这里只写.current权重是10，会被20的权重覆盖，只有写成 .nav>.current才不会被覆盖，权重相同时按照顺序*/
           background-color: rgb(216, 131, 173);
       }
       .content>li{
           list-style: none;
           display: none;
       }
      .content>.show{
          display: block;
      }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
  /*  //1:监听选项卡的移入事件  
   $('.nav>li').mouseenter(function(){ 
       //1.1修改被移入选项卡的背景颜色
     $(this).addClass('current');
     //1.2获取当前移入选项卡的索引
     var index=$(this).index();
     //1.3根据索引找到对应的图片
     var $li=$('.content>li').eq(index);
     //1.4显示找到的图片
     $li.addClass('show');
   })
   $('.nav>li').mouseleave(function(){
        //1.1还原被移入选项卡的背景颜色
     $(this).removeClass('current');
     var index=$(this).index();
     var $li=$('.content>li').eq(index);
     //1.2隐藏对应的图片
     $li.removeClass('show');
   })*/
   //简化代码并解决bug
   $('.nav>li').mouseenter(function(){
    $(this).addClass('current');
    $(this).siblings().removeClass('current');//siblings选中未被选中的
    var index=$(this).index();
    var $li=$('.content>li').eq(index);
    $li.addClass('show');
    $li.siblings().removeClass('show');
    })
    })
    </script>
</head>
<body>
    <div class="box">
        <ul class="nav">
            <li class="current">长沙</li>
            <li>郑州</li>
            <li>西安</li>
            <li>武汉</li>
            <li>开封</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="http://b281.photo.store.qq.com/psb?/V13fa3kk2JocxB/bM7tyK8qAAZ8ozdlbBOvCFsoirl.aOuFxPqNMAQ5qgo!/b/dBkBAAAAAAAA&bo=oAU4BAAAAAARF7k!&rf=viewer_4" alt="" style="width: 550px;height: 298px;"></li>
            <li><img src="http://a1.qpic.cn/psb?/V13fa3kk2b8rXX/eZsaOECPWy91NgXLI5DKaQJmseNWbMq85u5s2aco2lM!/b/dJgAAAAAAAAA&bo=QAYWC0AGFgsRCT4!&rf=viewer_4" alt=""style="width: 550px;height: 298px;"></li>
            <li><img src="http://b276.photo.store.qq.com/psb?/V13fa3kk1tXuy2/v3Fd2oz2lXyqH6uBuUjSyonPRKkQXNtNLjOgXIY1*E8!/b/dBQBAAAAAAAA&bo=QAZVCKALgA8RKSE!&rf=viewer_4" alt=""style="width: 550px;height: 298px;"></li>
            <li><img src="http://b159.photo.store.qq.com/psb?/V13fa3kk3N4sRh/Aq4MQOXDK9OrWp*Tfymlbwh8Hr4TUhdoZC160CbsFqo!/b/dJ8AAAAAAAAA&bo=oAU4BDgEoAURCT4!&rf=viewer_4" alt=""style="width: 550px;height: 298px;"></li>
            <li><img src="http://m.qpic.cn/psb?/V13fa3kk0zUpc8/Qz0G3zDA*DsuLLz0GEDc7cnhBEdIcN8m5hrWXSAS2Dk!/b/dEIAAAAAAAAA&bo=OASgBTgEoAURGS4!&rf=viewer_4" alt=""style="width: 550px;height: 298px;"></li>
        </ul>
    </div>
</body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——事件的移入移出小练习Tab选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫