公共导航a标签跳转添加样式

最新推荐文章于 2023-10-19 10:47:25 发布

aa13245890

最新推荐文章于 2023-10-19 10:47:25 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webmuluo/p/11151847.html

本文介绍了一种在网页开发中保持导航栏选中项高亮显示的方法，即使在页面刷新后也能保持当前页面对应的导航项样式不变。通过使用jQuery遍历导航链接，检查其href属性是否与当前页面URL匹配，并为匹配的链接父元素添加“active”类。

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

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行!

在开发公共导航页面时，大家可能会遇到这样一个问题，在a标签点击跳转页面后，被点击的a标签添加的样式刷新后消失。

<!-- 导航 -->
<header class="nav">

    <div class="nav__holder nav--sticky">
        <div class="container relative">
            <div class="flex-parent">
                <img src="img/logo.png" alt="" class="logo-ml">
                <!-- 头部导航 -->
                <nav class="flex-child nav__wrap d-none d-lg-block">
                    <ul class="nav__menu">

                        <li class="active">
                            <a href="index.html">首页</a>
                        </li>

                        <li class="nav__dropdown">
                            <a href="search-results.html">最新文章</a>
                        </li>

                        <li class="nav__dropdown">
                            <a href="categories.html">热门文章</a>
                        </li>

                        <li class="nav__dropdown">
                            <a href="about.html">学习提升</a>
                        </li>

                        <li>
                            <a href="javascript:;">应用工号</a>
                        </li>

                    </ul>
                </nav> <!-- end 头部导航 -->

            </div>
        </div>
    </div>
</header>  <!-- end 导航 -->

<script>
    $(document).ready(function(){
        $(".nav__menu>li>a").each(function(){
            $this = $(this);
            if($this[0].href === String(window.location)){
                $(".nav__menu>li").removeClass("active");
                $this.parent().addClass("active");
            }
        });
    });
</script>