【Layui】用js实现超链接导航菜单点击切换选中时的状态

目的：

使用layui选项卡layui-tab，在li中使用a超链接，点击超链接的时候切换对应的页面，同时给对应的选项卡添加点击状态，对分页链接同样有效。

效果

html代码

需要注意的是，在使用layui选项卡时，下面切换内容的div的layui-tab-item 类就不需要了，直接删除即可。

<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');  //移除点击状态类
    }
  });