用js實現超鏈接導航菜單點擊切換選中時的狀態

項目中使用到點解導航切換不同的顏色，如果只是li選項卡還好辦，這次用到的超鏈接選項卡，因為a鏈接每次點擊都會刷新，所以瀏覽器記不住點擊的狀態，也沒法切換點擊狀態，因為項目中有好多地方要用到，在網上找了好多，總結一下。

效果

html代碼

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" id="nav" >
  <ul class="layui-tab-title">
     <li><a href="{:url('studentList')}">全部</a></li>
     <li><a href="{:url('studentList',array('type'=>4))}">正常</a></li>
     <li><a href="{:url('studentList',array('type'=>3))}">到期</a></li>
     <li><a href="{:url('studentList',array('type'=>1))}">即將欠費</a></li>
     <li><a href="{:url('studentList',array('type'=>2))}">欠費</a></li>
  </ul>
</div>

js代碼

 // 超鏈接選項卡切換
  var urlstr = location.href; //獲取點擊的url
  var urlstatus=false;    //標識點擊狀態
  $("#nav a").each(function () {
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('layui-this');   //添加點擊狀態類
      urlstatus = true;   //切換點擊狀態
    } else {
      $(this).removeClass('layui-this');  //移除點擊狀態類
    }
  });