jQuery实现Tab选项卡

标签: 大前端  jquery  html  css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="../../../img/sup.ico" type="image/x-ioc"/>
    <script src="../../../jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab {
            list-style: none;
            display: block;
            width: 400px;
            height: 50px;
            margin: 0 auto;
        }

        #tab li {
            width: 100px;
            height: 50px;
            background-color: #ccc;
            float: left;
            text-align: center;
            line-height: 50px;
        }

        #img li:nth-child(n+2) {/*正数第二个开始*/
            display: none;
        }

        #img {
            width: 400px;
            height: 200px;
            display: block;
            margin: 0 auto;
            list-style: none;
        }

        #img li img {
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
<ul id="tab">
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
</ul>

<ul id="img">
    <li><img src="../../../img/1.jpg"></li>
    <li><img src="../../../img/2.jpg"></li>
    <li><img src="../../../img/3.jpg"></li>
    <li><img src="../../../img/4.jpg"></li>
</ul>

<script>
    $(function () {
        $('ul:first>li:first').css({backgroundColor: 'yellow'});
        $('ul:first>li').on('mouseenter', function () {
            $(this).css('background-color', 'yellow')
                .siblings().css('background-color', '#ccc');
            let idx = $(this).index();
            // console.log(idx);//0,1,2,3
            //get img index set show
            let $img = $('ul:last>li>img').eq(idx);
            $img.parent().show();
            $img.parent().siblings().hide();
        });

    })
</script>
</body>
</html>

知识点:

:nth-child(n+2) {/*正数第二个开始*/
            display: none;
        }
:nth-child(-n+2) {/*倒数第二个开始*/
        }
let $img = $('ul:last>li>img').eq(idx);//获取与上面li对应index的图片
            $img.parent().show();//图片的父级li显示
            $img.parent().siblings().hide();//li的兄弟元素隐藏(因为图片在li内,所以单单一个img标签没有兄弟元素可选择)

效果展示:
在这里插入图片描述

版权声明:本文为printf_hello原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/printf_hello/article/details/104082675