test1

最新推荐文章于 2023-01-30 16:35:40 发布

音乐宇

最新推荐文章于 2023-01-30 16:35:40 发布

阅读量48

点赞数 1

分类专栏： Jquery

本文链接：https://blog.csdn.net/yinyueyu007/article/details/118598954

版权

Jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

    a {
        text-decoration: none;
    }

    .menu {
        width: 100%;
        height: 50px;
        background: gray;
    }

    .menu {
        float: left;
        padding: 0 5px;
        list-style: none;
    }

    .menu  a {
        width: 100px;
        line-height: 50px;
        text-align: center;
        display: block;
        color: black;
    }

    .menu .on {
        color: #fff;
        background: red;
    }
</style>
<body>
<div class="menu">
    <a href="1.html"> 首页</a>
    <a href="2.html"> 个人资料</a>
    <a href="3.html"> 我的好友</a>
    <a href="4.html"> 消息管理</a>
    </ul>
</div>
</body>
</html>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".menu  a").each(function () {
            if ($(this)[0].href == String(window.location)) {
                $(this).addClass("on").siblings().removeClass("on");
                //$(this).parent('li').addClass("on").siblings().removeClass("on"); 直接父级
            }
        });
    });
</script>