cari

Rumah >hujung hadapan web >tutorial js >JS menggunakan kuki untuk mengingati kesan navigasi anti-refresh lokasi semasa

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

PHPz
PHPzke hadapan
2016-05-16 15:36:321174semak imbas

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>

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

Kenyataan：
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Gambar rajah hubungan pelbagai jenis kemahiran JavaScript_javascriptArtikel seterusnya：Gambar rajah hubungan pelbagai jenis kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi