正在进入ing...

使用jQuery实现一个动态切换tab栏

发布时间:2020-09-29 浏览量: 1777 文章分类: 前端相关

Jquery真的是一个js神器，虽然直接操作DOM的方式在现在来看并不是那么流行，但是实现一些小功能还是非常容易的，而且简单易懂。这里我用jQuery实现了一个简单的跟随鼠标切换的动态TAB栏。

效果如下：

jQuery动态TAB切换栏

需要用到的知识点

  • 熟悉简单HTML、CSS先进行简单的布局
  • jQuery用到了mouseenter、addClass、removeClass、siblings

背景介绍

这里主要介绍的是jQuery实现，所以html、css的代码就不说了，就是页面画了一个框，然后嵌套了2个ul，一个存放上面的导航菜单、一个存放下面的图片。

mouseenter

mouseenter是当鼠标进入、经过元素时会触发mouseenter事件

addClass

addClass:给选定的元素添加一个或多个class样式

removeClass

removeClass:给选定的元素移除一个或多个class样式

siblings

`siblings: 返回被选定元素的所有同级元素

假设 ul下面有4个li，那么我们选中了第一个li``,siblings就会返回我们其余的3个li`

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery实现一个动态切换tab栏</title>
    <!-- jQuery 地址记得换成你自己的-->
    <script src="../plugins/jquery-3.5.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 440px;
            height: 298px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        .nav> li{
            list-style: none;
            width: 110px;
            height: 50px;
            background: orange;
            text-align: center;
            line-height: 50px;
            float: left;
        }
        .nav > .current{
            background: #ccc;
        }
        .content > li{
            list-style: none;
            display: none;
        }
        .content > .show{
            display: block;
        }
        .content> li >img{
            width: 100%;
            height: 250px;
        }
    </style>
    <script>
        $(function(){
            $(".nav > li").mouseenter(function(){
                // 1.1修改被移入选项卡的背景颜色
                $(this).addClass('current');
                // 1.2还原其他兄弟选项卡背景颜色
                $(this).siblings().removeClass('current')
                // 1.3 根据索引找到当前位置
                let index = $(this).index();
                // 1.4 根据索引显示当前图片,并隐藏其他元素的图片
                let li = $(".content > li").eq(index);
                li.siblings().removeClass('show')
                // 1.5 显示对应的图片
                li.addClass('show');
            })
        })
    </script>
</head>
<body>
<div class="box">
    <ul class="nav">
        <li class="current">H5+C3</li>
        <li>Python</li>
        <li>小程序</li>
        <li>Linux</li>
    </ul>
    <ul class="content">
        <li class="show"><img src="https://www.wuyabala.com/media/media/fd31db8484e84dd589f9a6028f2878fd.jpeg" alt=""></li>
        <li><img src="https://www.wuyabala.com/media/media/5e438e833b034e2ca1b8cd4501e78476.jpg" alt=""></li>
        <li><img src="https://www.wuyabala.com/media/media/4933f7ca328246aeb3132fcb063095ad.jpg" alt=""></li>
        <li><img src="https://www.wuyabala.com/media/media/4d255d1fe82446ba94666ca0d1df5726.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>