JS menggunakan kuki untuk mengingati kesan navigasi anti-refresh lokasi semasa-tutorial js-php.cn

JS menggunakan kuki untuk mengingati kesan navigasi anti-refresh lokasi semasa

PHPz

Lepaskan： 2018-09-28 17:09:01

ke hadapan

1169 orang telah melayarinya

Artikel ini terutamanya memperkenalkan kesan navigasi anti-segar semula JS menggunakan kuki untuk mengingati lokasi semasa Ia melibatkan teknik berkaitan kuki pengendalian JavaScript dan reka letak gaya navigasi Ia mempunyai nilai rujukan tertentu. Butirannya adalah seperti berikut:

Berikut ialah demonstrasi bar navigasi anti-refresh yang menggunakan kuki untuk mengingati kedudukan semasa Ia terutamanya menunjukkan kepada anda cara menggunakan teknologi Kuki dalam JS. teknologi JS anda akan dibawa ke peringkat seterusnya. Menu ini terasa baik Selepas anda mengklik tetikus, ia akan kekal dalam kedudukan asal selepas menyegarkan halaman, seolah-olah ia mempunyai fungsi memori.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila Lawati Tutorial Video JavaScript!