用js实现超链接导航菜单点击切换选中时的状态
程序员文章站
2022-05-30 15:00:14
项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了好多,总结一下。 效果 html代码 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'); //移除点击状态类 } });
上一篇: 2022广东双一流高校有哪些?附广东第二轮双一流大学名单详情
下一篇: 小弟不才