Web前端：jQuery练习（tab选项卡）

最新推荐文章于 2024-01-24 12:19:34 发布

Mr. Donkey_K

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量323

点赞数

分类专栏： Web前端练习文章标签： Web前端 jQuery tab选项卡

本文链接：https://blog.csdn.net/Dreaming5498/article/details/98878162

版权

Web前端练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

题目要求
效果展示
代码实现

题目要求

选项卡实现图片转换

效果展示

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 448px;
            height: 298px;
            border: 1px solid lightgray;
            margin: 50px auto;
        }

        .nav > li {
            list-style: none;
            width: 110px;
            height: 50px;
            background: darkseagreen;
            color: white;
            text-align: center;
            line-height: 50px;
            float: left;
            border: 1px solid white;
        }

        .nav > li:hover {
            background-color: green;
        }

        .nav > .current {
            background-color: green;
        }

        .content > li {
            list-style: none;
            display: none;
        }

        .content > .show {
            display: block;
        }

        .content > li > img {
            width: 448px;
            height: 248px;

        }
    </style>
    <script src="JS/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $('.nav li').mouseenter(function () {
                $(this).addClass("current");
                $(this).siblings().removeClass('current');
                var index = $(this).index();
                var contentLiObj = $(".content li").eq(index);
                contentLiObj.siblings().removeClass('show');
                contentLiObj.addClass('show');
            });
        });
    </script>
</head>
<body>
<div class="box">
    <ul class="nav">
        <li class="current">主页</li>
        <li>遇见好货</li>
        <li>年中狂欢</li>
        <li>夏日尚新</li>
    </ul>
    <ul class="content">
        <li class="show"><img src="./img/img5.jpg" alt=""></li>
        <li><img src="./img/img1.jpg" alt=""></li>
        <li><img src="./img/img2.jpg" alt=""></li>
        <li><img src="./img/img3.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

Mr. Donkey_K

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端：jQuery练习（tab选项卡）

文章目录题目要求效果展示代码实现题目要求选项卡实现图片转换效果展示代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/c...
复制链接

扫一扫