乔越

发表文章数:122

热门标签

, ,

四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 编程语言 » HTML » 「jQuery」使用jQuery完成tab选项卡的切换案例

tab选项卡

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

  1. 需要监听它的移入
    1. 这里使用 mouseenter ()方法监听鼠标的移入操作
  2. 鼠标移入后 addClass() 使用此方法添加类 class
  3. siblings() 
    1. 使用此方法找到同级别的其他元素
    2. 并使用 removeClass()方法删除
    3. 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
    4. 可以用可选的表达式进行筛选。
  4. index() 获取当前元素的索引
  5. 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>
抱歉,隐藏内容 回复 后刷新可见

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《「jQuery」使用jQuery完成tab选项卡的切换案例》 发布于2020-06-16

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

4 + 9 =


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册