用jq動態給導航菜單添加active

 

 點擊後頁面跳轉到了新的連接，找到全部的li下的a標籤，對其連接地址進行判斷，若是和當前瀏覽器的地址一致，就認爲是當前應該激活的菜單，添加active類，不然就取消。

<ul class="ul">
                    <li>
                        <a class="active" href="/" title="cad首頁">首頁</a>
                    </li>
                    <li>
                        <a href="/pc/legalcad" title="CAD正版化">產品</a>
                    </li>
                    <li>
                        <a  href="/pc/QandA" title="CAD問答">問答</a>
                    </li>
                    <li>
                        <a href="/pc/course" title="CAD教程">教程</a>
                    </li>
                    <li>
                        <a href="/pc/softdownload" title="CAD下載">下載</a>
                    </li>
                    <li>
                        <a href="/pc/buy" title="cad購買">購買</a>
                    </li>
                    <li><a href="http://www.caxa.com/forum/"  title='咖迷社區' target="_blank">社區</a></li>
                </ul>

 

.ul {display:flex;width:500px;}
.ul li{height:78px;line-height:78px;padding:0 15px;}
.ul li a{font-size:18px;color:#fff;}
.ul li a:hover,.header .ul li a.active{color:#00f6ff;cursor:pointer;}

  $(function () {
        $(".ul").find("a").each(function () {var a = $(this)[0];
            if ($(a).attr("href") === location.pathname) {
                $(this).addClass("active");
            } else {
                $(this).removeClass("active");
            }
        });
    })