当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 用js实现超链接导航菜单点击切换选中时的状态

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

2019年01月18日  | 移动技术网IT编程  | 我要评论

项目中使用到点解导航切换不同的颜色，如果只是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');  //移除点击状态类
    }
  });

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网