tab选项卡demo

最新推荐文章于 2024-05-01 00:06:10 发布

Akimoto Hiroshi

最新推荐文章于 2024-05-01 00:06:10 发布

阅读量121

点赞数

分类专栏： jQuery 文章标签： js jquery html

本文链接：https://blog.csdn.net/dyw3390199/article/details/107074382

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab选项卡demo</title>
    <script src="jquery-3.3.1.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 290px;
            border: 1px solid black;
            margin: 100px auto;
        }
        .nav>li{
            list-style: none;
            float: left;
            width: 100px;
            height: 36px;
            line-height: 36px;
            background-color: yellow;
            text-align: center;
            font-weight: bold;
            /*border: 1px solid red;*/
            /*box-sizing: border-box;*/
        }
        .nav .current{
            background-color: orangered;
            color:white;
        }
        .img>li{
            list-style: none;
        }
        .img>li>img{
            display: none;
            height: 254px;
            width: 400px;
        }
        .img>li>img.current{
            display: block;
        }
    </style>
    <script>
        $(function () {
            // 方法1
            // $('.nav li').hover(function () {
            //     $(this).addClass('current').css('color','white');
            //     //index获取当前DOM元素在所有结果中的索引
            //     // console.log($(this).index());
            //     let index = $(this).index();
            //     $('.img li').eq(index).children('img').addClass('current');
            //
            // },function () {
            //     $(this).removeClass('current').css('color','black');
            //     let index = $(this).index();
            //     $('.img li').eq(index).children('img').removeClass('current');
            // })
            // 方法2
            $('.nav li').mouseenter(function () {
                $(this).addClass('current').siblings().removeClass('current');
                let index = $(this).index();
                $('.img>li').eq(index).children('img').addClass('current').parent()
                    .siblings().children('img').removeClass('current');
            });
        })
    </script>
</head>
<body>
    <div class="box">
        <ul class="nav">
            <li class="current">Html5</li>
            <li>Jquery</li>
            <li>Python</li>
            <li>Go</li>
        </ul>
        <ul class="img">
            <li><img src="./1.jpg" alt="" class="current"></li>
            <li><img src="./2.jpg" alt=""></li>
            <li><img src="./3.jpg" alt=""></li>
            <li><img src="./4.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

效果：

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab选项卡demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab选项卡demo</title> <script src="jquery-3.3.1.js"></script> <style type="text/css"> *{ margin: 0.
复制链接

扫一扫