本文實例講述了JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果。分享給大家供大家參考。具體如下：
這里演示利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航條，主要向大家展示如何在Js中使用Cookies技術(shù)，用好了Cookies，會使你的Js技術(shù)更上一層樓。這個菜單就感覺不錯，當(dāng)你鼠標(biāo)點擊之后，重新刷新頁面后它仍然是保留在原位置，好像帶有記憶功能。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-cookie-nav-pos-menu-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>cookie記憶-防刷新菜單</title><style>a{color:#5A73F3;text-decoration:none}body{background:#333;margin:30px;font-size:14px;}#menu li{float:left;height:25px;line-height:25px;list-style:none}#menu li a{padding:10px;}a:hover{background:#ccc;color:##3399FF}a.hover{height:25px;line-height:25px;background:red;color:#ffffff}a,area{blr:e-xpression(this.onFocus=this.blur())}:focus{-moz-outline-style:none;} </style></head><body><div id="menu"> <ul> <li><a href="javascript:void(0)" class="hover" onclick="changename(0)" hidefocus="true">我的菜單</a></li> <li><a href="javascript:void(0)" onclick="changename(1)" hidefocus="true">網(wǎng)頁模板</a></li> <li><a href="javascript:void(0)" onclick="changename(2)" hidefocus="true">精品代碼</a></li> <li><a href="javascript:void(0)" onclick="changename(3)" hidefocus="true">設(shè)計素材</a></li> <li><a href="javascript:clear();" hidefocus="true">恢復(fù)初始</a></li> </ul></div><script language="javascript">function changename(c,cl){ var d=document.getElementById("menu").getElementsByTagName("a"); if(!cl) { writeCookie("hovers",c,222); } c=readCookie("hovers")?readCookie("hovers"):c; for(i=0;i<d.length;i++) { d[i].className=i==c?"hover":""; }}function writeCookie(name, value, hours){ var expire = ""; if(hours != null) { expire = new Date((new Date()).getTime() + hours * 3600000); expire = "; expires=" + expire.toGMTString(); } document.cookie = name + "=" + escape(value) + expire;}function readCookie(name){ var cookieValue = ""; var search = name + "="; if(document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; cookieValue = unescape(document.cookie.substring(offset, end)) } } return cookieValue;}function clear(){ writeCookie("hovers","",222); document.location=document.location.href;}changename(0,1)</script></body></html>希望本文所述對大家的JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
