web前端利用jq实现选项卡切换功能

最新推荐文章于 2024-03-07 11:12:38 发布

hhhhhhe！

最新推荐文章于 2024-03-07 11:12:38 发布

阅读量720

点赞数 1

分类专栏： web前端练手项目文章标签： javascript css jquery html5

本文链接：https://blog.csdn.net/lsl30522/article/details/104682575

版权

web前端练手项目专栏收录该内容

7 篇文章 3 订阅

订阅专栏

最近在自学jQuery，利用jQuery现实了一下选项卡的切换

实现效果如下图：

功能：鼠标在各个标签中移动时，图片会显示相应的标题人物

html、css、jq代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 600px;
            border:1px solid #000000;
            margin: 50px auto;
            background-color: #216353;
        }
        img{
            margin-top: 100px;
            width: 500px;
            height: 320px;
        }
        .nav>li{
            list-style: none;
            width: 125px;
            height: 50px;
            background:#004445;
            text-align: center;
            line-height: 50px;
            float: left;
            color: #dcd6f7;
           font-size: 20px;
           font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        .content>li{
            list-style: none;
            display: none;
        }
        .content>.show{
            display: block;
        }
        .nav>.current{
            background: #edffea;
            color: #004445;
        }
        

    </style>

    <script src="lib/jquery-1.11.3/jquery-1.11.3/jquery.min.js">
    </script>
    <script>
        $(function(){

        $(".nav>li").mouseenter(function(){
            $(this).addClass("current");
           $(this).siblings().removeClass("current");
            var index=$(this).index();
            console.log(index);
            var $li = $(".content>li").eq(index);
            $li.siblings().removeClass("show");
            $li.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/路飞.jpg" alt="路飞"></li>
            <li><img src="img/索隆.jpg" alt="索隆"></li>
            <li><img src="img/罗宾.jpg" alt="罗宾"></li>
            <li><img src="img/乔巴.jpg" alt="乔巴"></li>

        </ul>
    </div>
    
</body>
</html>

hhhhhhe！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端利用jq实现选项卡切换功能

最近在自学jQuery，利用jQuery现实了一下选项卡的切换实现效果如下图：功能：鼠标在各个标签中移动时，图片会显示相应的标题人物html、css、jq代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...
复制链接

扫一扫

专栏目录