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

最新推荐文章于 2021-11-19 14:44:58 发布

Qiustion

最新推荐文章于 2021-11-19 14:44:58 发布

阅读量499

点赞数

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.csdn.net/Qiustion/article/details/51242217

版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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;}

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