js点击li标签切换背景颜色

碰到点击菜单，底色增加“active”属性，自己记录一下，以备以后能够用到。

<style>

.sub_nav {text-align:center;background-color:#fff;margin-top:30px;font-size:18px;}
.sub_nav a { border:1px solid #eee; border-top:none;display:block;height:50px;line-height:50px;border-bottom:1px solid #eee;color:#666;}
.sub_nav a:hover {background-color:#f2f6fa;color:#333;}
.sub_nav .icon {font-size:18px;}
.sub_nav .now a {color:#fff;background-color:#00aa98; border:none;}
.sub_nav .on a {color:#00aa98;background-color:#f2f6fa;}

.sub_nav .catid.active a{color:#fff;background-color:#00aa98; border:none;}
</style>

<div class="sub_nav"><ul>
      <li class="catid"><a href="/wangwenzhijia/"><i class="icon icon-bar-chart"></i> 资讯中心</a></li>
      <li class="catid"><a href="/shizheng/">时政</a></li>
      <li class="catid"><a href="/jingji/">经济</a></li>
      <li class="catid"><a href="/wenlv/">文旅</a></li>
      <li class="catid"><a href="/jiaoyu/">教育</a></li>
      <li class="catid"><a href="/jiankang/">健康</a></li>
    </ul></div>

 

 <script>$(function () {

　　$(".sub_nav").find("li").each(function () {

　　　　var a = $(this).find("a:first")[0];

　　　　 if ($(a).attr("href") === location.pathname) {

　　　　　　$(this).addClass("active");

　　　　} else {

　　　　　　 $(this).removeClass("active");

　　　　}

　　});

})</script>