recherche

Maison  >  Article  >  interface Web  >  JS utilise des cookies pour mémoriser l'effet de navigation anti-actualisation de l'emplacement actuel

JS utilise des cookies pour mémoriser l'effet de navigation anti-actualisation de l'emplacement actuel

PHPz
PHPzavant
2016-05-16 15:36:321139parcourir

Cet article présente principalement l'effet de navigation anti-rafraîchissement de JS utilisant des cookies pour mémoriser l'emplacement actuel. Il implique des techniques associées de fonctionnement des cookies JavaScript et de mise en page du style de navigation. Il a une certaine valeur de référence. Les détails sont les suivants :

Voici une démonstration de la barre de navigation anti-rafraîchissement qui utilise des cookies pour mémoriser la position actuelle. Elle vous montre principalement comment utiliser la technologie Cookies en JS. Si vous utilisez bien les Cookies, votre technologie JS passera au niveau supérieur. Ce menu est agréable à utiliser après avoir cliqué sur la souris, il restera toujours dans sa position d'origine après avoir actualisé la page, comme s'il avait une fonction de mémoire.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démonstration en ligne est la suivante :

http : //demo.jb51.net/ js/2015/js-cookie-nav-pos-menu-demo/

Le code spécifique est le suivant : 

<!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>
<p 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">网页模板</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">设计素材</a></li>
  <li><a href="javascript:clear();" hidefocus="true">恢复初始</a></li>
  </ul>
</p>
<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>

Le ci-dessus est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Diagramme de relations entre différents types de compétences JavaScript_javascriptArticle suivant：Diagramme de relations entre différents types de compétences JavaScript_javascript

Articles Liés

Voir plus