jQuery实现Tab选项卡

<!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标签没有兄弟元素可选择）

效果展示：


在这里插入图片描述
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容