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

秒速五厘米 2021-12-22 08:29 231阅读 0赞

项目中使用到点解导航切换不同的颜色，如果只是li选项卡还好办，这次用到的超链接选项卡，因为a链接每次点击都会刷新，所以浏览器记不住点击的状态，也没法切换点击状态，因为项目中有好多地方要用到，在网上找了好多，总结一下。

效果

![1149706-20190117104738666-590567072.png][]

![1149706-20190117104755560-1437487723.png][]

html代码

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

转载于:https://www.cnblogs.com/zxf100/p/10281046.html

[1149706-20190117104738666-590567072.png]: /images/20211220/6266ffb5e8f04e618bbda80252eed926.png
[1149706-20190117104755560-1437487723.png]: /images/20211220/579cdefaaae145ac8671ef65051ca619.png