「jQuery」使用jQuery完成tab选项卡的切换案例

我是一只虫子 2020-06-16 18:45:33

172

分类专栏：前端文章标签： javascript jquery html

本文链接：https://blog.csdn.net/imabug/article/details/106793141

版权

tab选项卡

在这里插入图片描述

需要监听它的移入
1. 这里使用 mouseenter ()方法监听鼠标的移入操作
鼠标移入后 addClass() 使用此方法添加类 class
siblings()
1. 使用此方法找到同级别的其他元素
2. 并使用 removeClass()方法删除
3. 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
4. 可以用可选的表达式进行筛选。
index() 获取当前元素的索引
eq() 匹配一个给定索引值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab选项卡-乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

    <style>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 440px;
            height: 298px;
            border: 1px solid #ccc;
            margin: 50px auto;
        }
        .nav>li{
            list-style: none;
            width: 110px;
            height: 50px;
            background: orchid;
            text-align: center;
            line-height: 50px;
            float: left;
        }
        .nav .curr{
            background: #ccc;
        }
        /* --------- */
        .content>li{
            list-style: none;
            display: none;
        }
        .content>.show{
            display: block;
        }
    </style>

    <script>

        $(function(){
            // 笨方法
            // $(".nav>li").mouseenter(function(){
            //     $(this).addClass("curr");
            //     var index = $(this).index();
            //     var $li = $('.content>li').eq(index);
            //     $li.addClass('show')
            // })
            // $(".nav>li").mouseleave(function(){
            //     $(this).removeClass("curr");
            //     var index = $(this).index();
            //     var $li = $('.content>li').eq(index);
            //     $li.removeClass('show')
            // })
            
            // 优秀方法
            // 监听移入方法
            $(".nav>li").mouseenter(function(){
                // 给当前移入的 加上class 
                $(this).addClass("curr");
                //查找同级别其他元素并删除 class
                // 重点 siblings()方法
                $(this).siblings().removeClass("curr");
                // 获取当前元素的索引
                // 重点 index()
                var index = $(this).index();
                // 获取当前索引的图片元素
                // 重点eq()
                var $li = $('.content>li').eq(index);
                // 给图片li加入class
                $li.addClass('show')
                //查找同级别其他元素并删除 class
                // 重点 siblings()方法
                $li.siblings().removeClass("show");
            })


        })

    </script>
</head>
<body>

    <div class="box">
        <ul class="nav">
            <li class="curr">第一个</li>
            <li>第二个</li>
            <li>第三个</li>
            <li>第四个</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""></li>
            <li><img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2565068596.jpg" alt=""></li>
            <li><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522880251.jpg" alt=""></li>
            <li><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p792776858.jpg" alt=""></li>
        </ul>
    </div>
    
</body>
</html>