用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");
            }
        });
    })