根据网址动态标记当前菜单项

为了解决在本地页面上写死菜单标记的样式,利用读取当前的网址来动态改变菜单的样式

JS代码:

$(function(){
 var currLocation=window.location.href;
 var curHref=curStr(currLocation,'wozhiai/','.html');
 $('.menuDiv .menuCont .menuList').find('li').removeClass('sel');
 switch(curHref){
  case 'index':
   $('.menuDiv .menuCont .menuList').find('li[name=spfxx]').addClass('sel');
   break;
  case 'XuKeList':
   $('.menuDiv .menuCont .menuList').find('li[name=xklb]').addClass('sel');
   break;
  case 'HeTongBeiAn':
   $('.menuDiv .menuCont .menuList').find('li[name=htba]').addClass('sel');
   break;
  case 'FangWuTongJi':
   $('.menuDiv .menuCont .menuList').find('li[name=fwtj]').addClass('sel');
   break;
  default :
   break;
 }
}

function curStr(text,startTxt,endTxt){
 var sInd=text.indexOf(startTxt);
 if(sInd>-1){
  var _startTxt=text.substr(sInd+startTxt.length);
  var eInd=_startTxt.indexOf(endTxt);
  if(eInd>-1){
   var result=_startTxt.substr(0,eInd);
  }else{
   return "";
  }
 }else{
  return "";
 }
 return result;
}

注:自定义函数curStr从currLocation网址信息中获取所需要的字符串,是通过定位位置方式获取。

也可以通过split()的方法来获取所需要的字符串,不需要写死截取字符串的起始与结束字符。

function curStr(text){
    var arrayTxt=text.split('/');  // split('/')分割成几个字符串数组
    var num_arrayTxt=arrayTxt.length;  // 获取分割成多少个数组
    if(num_arrayTxt>0){
        _resultTxt=arrayTxt[num_arrayTxt-1];   // 提取最后的数组字符串
        var arrayResult=_resultTxt.split('.');  // 再进行分割,去掉后缀
        if(arrayResult.length>0){
            return arrayResult[0];
        }else{
            return "";
        }
    }else{
        return "";
    }
}

html:

<div class="menuDiv">
  <div class="menuCont" style="height:100px;" >
    <ul class="menuList">
      <li name="spfxx">封神纪</li>
      <li name="xklb">西游记</li>
      <li name="htba">铁将纵横</li>
      <li name="fwtj">新著龙虎门</li>
    </ul>
  </div>
</div>

CSS:

.menuDiv{width:100%;height:100px;background:#FFF;}
.menuDiv .menuCont{width:100%;margin:0 auto;opacity:0.9;background:#FFF;position:relative;z-index:100;overflow:hidden;}
.menuDiv .menuCont .menuList{width:92%;display:inline-block;}
.menuDiv .menuCont .menuList li{line-height:93px;font-size:2.125rem;margin-left:3.2%;border-bottom:7px solid transparent;float:left;color:#b9babb;cursor:pointer;}
.menuDiv .menuCont .menuList li:hover{color:#1fb492;border-bottom:7px solid #1fb492;}
.menuDiv .menuCont .menuList li.sel{color:#1fb492;border-bottom:7px solid #1fb492;}


=== 记录完毕 ====
感谢李安琪同事的指导

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用React Router和React Context来实现动态权限菜单。首先,根据用户的角色或权限,动态生成菜单项。然后,使用React Router来管理路由,根据菜单项的URL来渲染对应的组件。最后,使用React Context来传递用户的角色或权限信息,以便在组件中进行权限控制。 ### 回答2: React 是一个用于构建用户界面的 JavaScript 库,可以用于实现动态权限菜单。 动态权限菜单意味着菜单的内容和显示方式会根据用户的权限动态加载和展示。在 React 中,可以通过以下步骤来实现动态权限菜单: 1. 定义权限列表:首先,需要确定菜单项的权限列表,即每个菜单项所对应的权限。可以将权限列表定义为一个数组或对象,其中每个权限都有一个唯一的标识符。 2. 获取用户权限:在 React 组件中,可以通过调用后端 API 或使用其他方式来获取当前用户的权限列表。可以将用户权限列表存储在组件的状态中。 3. 过滤菜单项:根据用户的权限列表,过滤出当前用户具备权限的菜单项。可以使用数组的 `filter` 方法或其他方式来实现。 4. 渲染菜单项:使用 React 的组件和 JSX 语法,根据过滤后的菜单项数组,动态生成菜单。可以使用循环、条件渲染等技术来确保只渲染用户具备权限的菜单项。 5. 添加交互功能:为每个菜单项添加必要的交互功能,例如点击菜单项后触发相应的路由跳转或显示子菜单等。 通过以上步骤,就可以在 React 中实现动态权限菜单。这样,无论用户的权限如何变化,菜单都会根据其权限动态加载和展示。 ### 回答3: React是一个用于构建用户界面的JavaScript库,它提供了许多强大的功能来创建交互式和动态的Web页面。使用React实现动态权限菜单可以通过以下步骤完成: 1. 配置路由:首先,需要使用React Router或类似的路由组件来设置应用程序的路由。这可以让我们根据用户的权限加载不同的页面或组件。 2. 获取用户权限:接下来,需要从后端或认证服务获取用户的权限信息。这可以是一个API请求,返回用户的权限数组或权限标记。 3. 创建菜单组件:根据用户的权限列表,创建一个动态菜单组件。这个组件会渲染用户有权限访问的菜单项,并且可以使用递归来处理多级菜单。 4. 权限验证:在菜单组件中,根据用户的权限列表对每个菜单项进行权限验证。如果用户拥有访问该菜单项的权限,将其显示在菜单中,否则隐藏或禁用。 5. 跳转处理:当用户点击菜单项时,根据菜单项的路由配置,使用React Router或自定义的路由处理函数来处理页面跳转。 6. 动态加载组件:根据菜单项的路由配置,可以使用React的按需加载功能,动态加载相应的组件。这样可以提高应用程序的性能,同时避免加载不相关的组件。 总结起来,使用React实现动态权限菜单可以分为配置路由、获取用户权限、创建菜单组件、权限验证、跳转处理和动态加载组件等步骤。这样可以根据不同用户的权限动态显示可访问的菜单项,提供更好的用户体验和数据安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值