JQuery-Tab选项卡

最新推荐文章于 2025-06-19 12:40:23 发布

进击的代码君

最新推荐文章于 2025-06-19 12:40:23 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/clear_love8/article/details/89889963

前端专栏收录该内容

12 篇文章

订阅专栏

博客展示了代码运行的结果，但未提及代码具体内容和运行环境等更多信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

撸代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JQuery-Tab选项卡</title>
    <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .box {
                width: 400px;
                height: 500px;
                border: 1px solid #000;
                margin: 50px auto;
            }
    
            .list>li {
                list-style: none;
                float: left;
                background-color: orange;
                text-align: center;
                width: 100px;
                height: 50px;
                line-height: 50px;
    
            }
    
            .content>li {
                list-style: none;
                background-color: aqua;
                display: none;
            }
    
            .list>.showlist {
                background-color: darkgrey;
            }
            .content>.showcontent{
                display: block;
            }
        </style>
    <script src="jQuery\jQuery1.12.4.js"></script>
    <script>
        $(function () {
            $(".list>li").mouseenter(function(){
                //1.获取鼠标移入的对象并让当前对象显示
                $(this).addClass("showlist");
                //2.获取当前对象的所有同级的其余元素集合，并隐藏
                $(this).siblings().removeClass("showlist");
                //3.获取当前li元素的索引
                var $index=$(this).index();
                //4.获取对应的ul中的li元素对象
                var $eq=$(".content>li").eq($index);
                //5.设置当前li元素可见
                $eq.addClass("showcontent");
                //6.获取当前对象的所有同级元素的集合，并隐藏
                $eq.siblings().removeClass("showcontent");
            });
        });
    </script>
</head>

<body>
    <div class="box">
        <ul class="list">
            <li class="showlist">H5+CSS3</li>
            <li>C语言</li>
            <li>java</li>
            <li>go语言</li>
        </ul>
        <ul class="content">
            <li class="showcontent">HTML5+CSS3从入门到精通</li>
            <li>C语言从入门到精通</li>
            <li>java从入门到精通</li>
            <li>go语言从入门到精通</li>
        </ul>
    </div>
</body>

</html>

运行结果如下：
在这里插入图片描述