公共導航a標簽跳轉添加樣式

個人實際開發中用到的效果問題總結出來便於自己以后開發查看調用,如果也適用其他人請隨意拿走勿噴就行!

在開發公共導航頁面時，大家可能會遇到這樣一個問題，在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>