JS는 쿠키를 사용하여 현재 위치의 새로 고침 방지 탐색 효과를 기억합니다.-JS 튜토리얼-php.cn

JS는 쿠키를 사용하여 현재 위치의 새로 고침 방지 탐색 효과를 기억합니다.

PHPz

풀어 주다： 2018-09-28 17:09:01

앞으로

1168명이 탐색했습니다.

이 글에서는 현재 위치를 기억하기 위해 쿠키를 사용하는 JS의 새로 고침 방지 탐색 효과를 주로 소개합니다. 여기에는 JavaScript 작동 쿠키 및 탐색 스타일 레이아웃 관련 기술이 포함되어 있습니다. 자세한 내용은 다음과 같습니다.

쿠키를 사용하여 현재 위치를 기억하는 새로 고침 방지 탐색 모음의 데모는 주로 JS에서 쿠키 기술을 사용하는 방법을 보여줍니다. 귀하의 JS 기술은 다음 단계로 발전할 것입니다. 이 메뉴는 마우스를 클릭한 후에도 마치 메모리 기능이 있는 것처럼 페이지를 새로 고친 후에도 원래 위치에 그대로 유지됩니다.

실행 중인 효과의 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

로그인 후 복사

위의 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.