jquery网络换肤代码实现

最新推荐文章于 2023-08-10 10:10:55 发布

一只小虾米~~

最新推荐文章于 2023-08-10 10:10:55 发布

阅读量133

点赞数

CC 4.0 BY-SA版权

文章标签： jquery css html

本文链接：https://blog.youkuaiyun.com/weixin_43930256/article/details/127528863

本文介绍如何利用jQuery库来实现动态更换网页皮肤的功能，通过切换不同的CSS文件，实现用户界面风格的快速切换，提升用户体验。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.1.js"></script>
    <style>
        *{padding: 0px;margin: 0px;list-style: none;}
        body{
            background-color:#A1C4A6 ;
        }
        .box{
            width: 500px;
            margin: 20px auto;
        }
        .box div{
            display: inline-block;
            width: 20px;
            height: 20px;
            position: relative;
            margin-right: 10px;
        }
        .box div p{
            width: 10px;
            height: 10px;
            position: absolute;
            top: 5px;
            left: 5px;
        }
        /* 制作点击按钮 */
        .box .button1{
            background-color: red;
        }
        .box .button2{
            background-color: green;
        }
        .box .button3{
            background-color: black;
        }
        ul{
            display: flex;
            margin-top: 10px;
            color: white;
        }
        ul li{
            padding: 5px 20px;
            background-color: green;
            border-right: 1px solid white;
        }
        /* 激活样式 */
        .activeP{
            background-color: white;
        }
        .activeLip{
            border-bottom: 1px solid white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="button1">
            <p></p>
        </div>
        <div class="button2">
            <p class="activeP"></p>
        </div>
        <div class="button3">
            <p></p>
        </div>
        <ul>
            <li><p>新闻</p></li>
            <li><p>娱乐</p></li>
            <li><p>体育</p></li>
            <li><p>电影</p></li>
            <li><p>音乐</p></li>
            <li><p>旅游</p></li>
        </ul>
    </div>
</body>
<script>
    Color1=["red","green","black"];//方形按钮颜色数组
    Color2=["#FCDADA","#A1C4A6","#CACACA"];//背景颜色数组
    $(function() {
        // 鼠标移入移除，ul li变化功能
        $("ul li").mouseover(function() {
            let pos=$(this).index();
            $("ul li p").eq(pos).addClass("activeLip");
        })
        $("ul li").mouseout(function() {
            $("ul li p").removeClass("activeLip");
        })
        // 点击小方框，方框和背景颜色变化功能
        $(".box div").click(function() {
            let index=$(this).index();
            $(".box div p").removeClass("activeP");
            $(".box div p").eq(index).addClass("activeP");
            $("body").css("backgroundColor",Color2[index]);
            $("ul li").css("backgroundColor",Color1[index]);
        })
    })
</script>
</html>