为了解决在本地页面上写死菜单标记的样式,利用读取当前的网址来动态改变菜单的样式
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;}
=== 记录完毕 ====
感谢李安琪同事的指导