快捷導(dǎo)航

JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果

更新時(shí)間：2015年10月15日 09:30:52 作者：企鵝

這篇文章主要介紹了JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果,涉及JavaScript操作cookie及導(dǎo)航樣式布局的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航效果。分享給大家供大家參考。具體如下：

這里演示利用cookie記憶當(dāng)前位置的防刷新導(dǎo)航條，主要向大家展示如何在Js中使用Cookies技術(shù)，用好了Cookies，會(huì)使你的Js技術(shù)更上一層樓。這個(gè)菜單就感覺(jué)不錯(cuò)，當(dāng)你鼠標(biāo)點(diǎn)擊之后，重新刷新頁(yè)面后它仍然是保留在原位置，好像帶有記憶功能。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/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)頁(yè)模板</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è)計(jì)素材</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>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: