jQuery从繁到简实现tab栏切换

Posted 2021-08-23 是这般没趣

一、什么是tab栏切换

       在我们浏览网页时，经常会遇到在一些登录注册模块或者新闻模块会有以下这样的情况，这样的效果我们就称为tab栏切换。

 二、实现切换效果的原理

       当我们点击上面的第一个小标题时，下面的第一个内容就会出现；当我们点击第二个小标题时，第二个内容会相应的出现，就实现了同一个板块显示不同内容的效果。

三、方法

（一）、获取元素添加鼠标点击事件（此时只能实现最简单的显示与隐藏）

       $(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })

（二）、用slideDown和slideUp实现切换时的滑动效果

      $(function() {
            鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").slideDown(200);
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").slideUp(200);
            });
       })

（三）、事件切换 hover 就是鼠标经过和离开的复合写法

         $(function() {         
            $(".nav>li").hover(function() {
                $(this).children("ul").slideDown(200);
            }, function() {
                $(this).children("ul").slideUp(200);
            });
         })

 （四）、事件切换 hover只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数。因为我们的tab栏切换是同一种效果，所以可以使用这个方法。

        $(function() {
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });
        })

四、总结

       不论我们学习的知识点有多么复杂和繁琐，我们一定要学会总结分析，其实我们会发现很多知识点都是相互关联的，也许现在的你不知道自己现在学的知识是干嘛用的，但是你要相信，在未来的某一刻，现在学的知识一定会照亮你前进的遥远路途。（博主好久没有更新的时候有在认真学习哦！所以我们都要一起加油呀！）