JS利用cookie记忆当前位置的防刷新导航效果

本文实例讲述了JS利用cookie记忆当前位置的防刷新导航效果。分享给大家供大家参考。具体如下：

这里演示利用cookie记忆当前位置的防刷新导航条，主要向大家展示如何在Js中使用Cookies技术，用好了Cookies，会使你的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>
<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">网页模板</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>
</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>

希望本文所述对大家的JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • iOS中定位当前位置坐标及转换为火星坐标的方法

    定位和位置信息获取 定位和反查位置信息要加载两个动态库 CoreLocation.framework 和 MapKit.framework 一个获取坐标一个提供反查 复制代码 代码如下: // appDelgate.h #import <UIKit/UIKit.h> #import <CoreLocation/CoreLocation.h> #import <MapKit/MapKit.h>   @interface AppDelegate : UIResponder

  • iOS获取到用户当前位置

    通过CoreLocation定位,获取到用户当前位置,跟地图中的定位不同. 一.导入CoreLocation.framework 二.#import <CoreLocation/CoreLocation.h> 三.声明代理 <CLLocationManagerDelegate> 四.代码实现 1.声明 CLLocationManager *locationManager;//定义Manager // 判断定位操作是否被允许 if([CLLocationManager locatio

  • 鼠标移到导航当前位置的LI变色处于选中状态

    鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航. 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>鼠标移到导航上面 当前的LI变色 处于当前的位置</title> <style type="text/css"&g

  • 在AngularJS中如何使用谷歌地图把当前位置显示出来

    --在html5中,为我们提供了navigator.geolocation.getCurrentPosition(f1, f2)函数,f1是定位成功调用的函数,f2是定位失败调用的函数,而且会把当前的地理位置信息作为实参传递给f1和f2函数.f1函数调用谷歌地图的API即可. 如何展示呢? --需要一个提示信息和展示地图的一个区域. 页面上,大致是这样: <map-geo-location height="400" width="600"></ma

  • 讲解iOS开发中基本的定位功能实现

    讲解iOS开发中基本的定位功能实现

    一.简单说明 1.CLLocationManager   CLLocationManager的常用操作和属性   开始用户定位- (void)startUpdatingLocation;   停止用户定位- (void) stopUpdatingLocation;   说明:当调用了startUpdatingLocation方法后,就开始不断地定位用户的位置,中途会频繁地调用代理的下面方法 复制代码 代码如下: - (void)locationManager:(CLLocationManager

  • Android实现Service获取当前位置(GPS+基站)的方法

    Android实现Service获取当前位置(GPS+基站)的方法

    本文实例讲述了Android实现Service获取当前位置(GPS+基站)的方法.分享给大家供大家参考.具体如下: 需求详情: 1).Service中每隔1秒执行一次定位操作(GPS+基站) 2).定位的结果实时显示在界面上(要求得到经度.纬度) 技术支持: 1).获取经纬度 通过GPS+基站获取经纬度,先通过GPS来获取,如果为空改用基站进行获取–>GPS+基站(基站获取支持联通.电信.移动). 2).实时获取经纬度 为了达到实时获取经纬度,需在后台启动获取经纬度的Service,然后把经纬度

  • thinkphp实现面包屑导航（当前位置）例子分享

    以前栏目很少,就用死办法做的(首页 -> 栏目的名字),现在栏目多了,渐渐二级栏目,三级栏目也来了,这样的方式显然不太合适,于是就改进了一下.也不难,利用一个递归函数就可以了. 使用例子: 复制代码 代码如下: //当前位置-第一个参数 catid为当前栏目的id,第二个参数为文章的标题,调用栏目当前位置时第二个参数为空即可.$this->assign("now_here",$this->now_here($catid,$res['title'])); 实现代码: 复

  • 带有定位当前位置的百度地图前端web api实例代码

    废话不多说,直接给大家贴代码了,具体代码如下所示, 关键代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content=

  • Android获取当前位置的经纬度数据

    Android获取当前位置的经纬度数据

    现在有这么一个需求:开启一个Service服务,获取当前位置的经纬度数据,将获取的数据以广播的方式发送出去,注册广播的Activity接收广播信息,并将接收到的数据在当前Activity显示,如果当前位置发生变化,经纬度数据改变,获取改变后的经纬度数据,通过Handler发送消息,更新UI界面,显示更新后的内容,请问这样子的Demo该如何实现? LocationTool获取当前位置信息 Android手机获取当前位置的方式:GPS定位,WIFI定位,基站定位,当前Demo使用GPS卫星定位,在L

  • thinkphp获取栏目和文章当前位置的方法

    thinkphp获取栏目和文章当前位置的方法

    本文实例讲述了thinkphp获取栏目和文章当前位置的方法.分享给大家供大家参考.具体实现方法如下: 今天把博客一些细节完善了一下,其中修改了一下栏目页和文章页中的"当前位置".以前栏目很少,就用死办法做的(首页 -> 栏目的名字),现在栏目多了,渐渐二级栏目,三级栏目也来了,这样的方式显然不太合适,于是就改进了一下.也不难,利用一个递归函数就可以了. 测试效果如下图所示: 查看源文件效果: 复制代码 代码如下: <a href="http://www.jb51.

随机推荐