无需Cookie的仿更新2级高亮度菜单

日期:2020-10-27 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

这也是我常常选用的方法,1般的网页页面最少都有两级菜单,第1个是顶部的总导航栏条菜单,另外一个是左边的归类导航栏菜单。1般规定在1级菜单高亮度下2级菜单也能纪录当今情况。
针对1个包括顶部菜单的页头地区假如固定不动不会改变的,也便是它无需每次都再次载入,这类状况下用纯CSS或JS方法能够很非常容易地完成,但今日我要谈的并不是这类,今日说的是1级菜单和2级菜单在每一个网页页面中全是动态性载入的,也便是它们是做为客户控制的方法加载的。这类状况下要想纪录菜单的高亮度情况是1件较为艰难的事儿。
自然,你将会会说,用cookie能够纪录每一个网页页面载入时之前纪录的高亮度情况,是的,它的确能够纪录,可是这类方法在1些繁杂的包括很多子网页页面的运用中,会给客户导致很多困扰和不便。例如在cookie存活周期限内,再次开启这个新项目时,此时cookie的存活周期都还没彻底完毕,它还纪录着之前储存的情况,而这时候网页页面详细地址早已产生了转变,那末当今高亮度的菜单所指向的就并不是客户所期待看到的网页页面。实践活动证实,这个cookie的存活周期不管你设定多长都不可以完善处理客户故意更新网页页面的情况。这的确是1件不尽人意的事儿!
那末有木有1种较好的方法来处理这类情况呢?
回答是有的。大家了解要处理这个难题,最理想化的方法是在每一个网页页面载入时,依据网页页面的url详细地址显式地设定当今菜单的高亮度款式。这能完善地处理此类难题,而且这类方法不管客户怎样故意点一下更新按钮,高亮度情况依然维持不会改变。 了解了基本原理,要完成起来就非常容易多了。
构造层
1级菜单构造层:

拷贝编码
编码以下:

<ul id="menu">
<li><a href="default.html">主页</a></li>
<li><a href="clothing.html">服饰用具</a></li>
<li><a href="house.html">家居用具</a></li>
<li><a href="cosmetic.html">化装用具</a></li>
</ul>

能够看到在这个1级菜单中,其连接详细地址1般是沒有主要参数值的。 2级菜单的构造层:

拷贝编码
编码以下:

<ul id="othermenu">
<li><a href="house.html?pId=2&sId=1">平常用具</a></li>
<li><a href="house.html?pId=2&sId=2">小型家俱</a></li>
<li><a href="house.html?pId=2&sId=3">家用电器配件</a></li>
<li><a href="house.html?pId=2&sId=4">床品套件</a></li>
<li><a href="house.html?pId=2&sId=5">婚庆床品</a></li>
<li><a href="house.html?pId=2&sId=6">少年儿童床品</a></li>
<li><a href="house.html?pId=2&sId=7">工艺摆放</a></li>
<li><a href="house.html?pId=2&sId=8">清理专用工具</a></li>
<li><a href="house.html?pId=2&sId=9">家居清理</a></li>
</ul>

与1级菜单不一样的是,大家将2级菜单中的连接详细地址添加两个主要参数值,pId主要参数指向的是顶部1级菜单的的编号,而sId则是菜单自身的次序号。大家将这两个菜单的总器皿ul都设定了两个不一样中的ID,它们必须在JS中启用,因此干万不可以少。
款式层
有关款式,实际上都沒有甚么非常的地区,你能够随心所意地设定成你要想的款式,只是必须留意的地区是,大家必须独立设定菜单高亮度的3种情况款式,以供JS动态性启用。

拷贝编码
编码以下:

/*1级菜单的3种款式设定*/
#menu li a.normal{background:#fff;}//一般款式
#menu li a.over{background:#00ff00;} //滚翻款式
#menu li a.cur{background:#ff0000;color:#fff;} //高亮度款式
/*2级菜单的3种款式设定*/
#othermenu li a.normal{background:#fff;} //一般款式
#othermenu li a.over{background:#AA7F00;color:#fff;} //滚翻款式
#othermenu li a.cur{background:#7F0000;color:#fff;} //高亮度款式

个人行为层
由于要内行为层中操纵菜单的3种情况,因此针对A连接标识,大家就不应用hover伪类来做到菜单的3种动态性个人行为了,大家能够用onmouseover、onmouseout和onclick来效仿伪类的3种个人行为,这样好便于js的动态性调剂。而且以便做到个人行为、款式和构造的3层分离出来,大家也无需在A标识的html中去再加动态性的个人行为操纵编码,这并不是1种优良的制做习惯性。因而大家必须在网页页面的载入涵数上做点文章内容,这就必须应用到onload涵数,当网页页面1载入完后就动态性关联a标识的3种个人行为情况。
在网页页面1载入进行后,大家最先获得当今的网页页面url标识符串,再依据这个标识符串和12级菜单中的A标识的href详细地址开展比照,假如存在同样项,则高亮度此菜单项的款式。
详尽的注解表明我都在下面的涵数中11标明出来,在此就不11细述了。重要涵数编码以下:

拷贝编码
编码以下:

//依据URL详细地址的主要参数或标识符串高亮度当今菜单。
function hightLightMenu(firstMenuID,twoMenuID){
var strUrl,strHref,subNavs,strLast,strParentID,strSelfID,
parentID,selfID,strID;
var Navs=document.getElementById(firstMenuID).getElementsByTagName("a");
// 假如连接沒有主要参数,或URL连接中不存在大家要获得的主要参数,则回到数字能量数组中的编号
if(location.href.indexOf("?")==⑴){
strUrl=location.href.substring(location.href.lastIndexOf("/")+1);//获得URL网页页面名字
//1级菜单高亮度
for (var i = 0; i < Navs.length; i++) {
//在IE6,IE7中strHref得到的是全相对路径,而在IE8和ff中得到的是网页页面名字,以便适配,必须将它的标识符串开展拆分
strHref=Navs[i].getAttribute("href").substring(Navs[i].getAttribute("href").lastIndexOf('/')+1);
if(strUrl==strHref){
//高亮度当今菜单项
addClass(Navs[i],"cur");
}
else{//假如是其它项,则关联电脑鼠标两态恶性事件
(function(i){
var obj=Navs[i];
addEventHandler(obj,"mouseover",function(){overMe(obj)});
addEventHandler(obj,"mouseout",function(){outme(obj)});
})(i)
}
}
//2级菜单高亮度
if (document.getElementById(twoMenuID) != null) {//分辨是不是存在2级菜单
//有将会2级菜单不存在,如主页仅有1级菜单,因此当菜单id存在时,则...
subNavs = document.getElementById("othermenu").getElementsByTagName('a');
for (var n = 0; n < subNavs.length; n++) {
hightlight(subNavs,n,0);//默认设置高亮度第1个菜单项
}
}
}
else{
//假如url中带有主要参数的网页页面,则...
strLast = location.href.substring(location.href.indexOf("?")+1);
strParentID=strLast.substring(0,strLast.indexOf("&"));
strSelfID=strLast.substring(strLast.indexOf("&")+1);
parentID=strParentID.substring(strParentID.indexOf("=")+1);//得到第1个主要参数,这是1级菜单的id
selfID=strSelfID.substring(strSelfID.indexOf("=")+1);//得到第2个主要参数,这是2级菜单的id
//1级菜单高亮度
for (var i = 0; i < Navs.length; i++) {
hightlight(Navs,i,parentID);
}
//2级菜单高亮度
if (document.getElementById(twoMenuID) != null) {//分辨是不是存在2级菜单
subNavs = document.getElementById(twoMenuID).getElementsByTagName('a');
for (var n = 0; n < subNavs.length; n++) {
strID=selfID - 1;
hightlight(subNavs,n,strID);
}
}
}
}
//高亮度涵数
function hightlight(elementArray,inumber,curMenuIndex){
if (inumber == curMenuIndex) {
addClass(elementArray[inumber],"cur");//高亮度当今菜单款式
}
else {
(function(inumber){
var obj = elementArray[inumber];
addEventHandler(obj, "mouseover", function(){overMe(obj)});//提升电脑鼠标移上去时的恶性事件
addEventHandler(obj, "mouseout", function(){outme(obj)});//提升电脑鼠标移走时的恶性事件
})(inumber)
}
}

历经如上1番设定,1个通用性、适配的高亮度涵数就诞生了,大家看看它的实际效果截图:

本实例的高亮度涵数在以下访问器中检测根据:
IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Chrome,Safari4.0,opera
由于子网页页面较多,请免费下载本实例装包文档到当地检测:免费下载Demo