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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titlecookie记忆-防刷新菜单/title style a { color : # 5a 73 F3；正文-装饰： none }正文{背景： # 333；margin :30 px font-size :14 px；} #菜单Li { float : leftheight :25 px线高：25 px列表式：无} #菜单阿利{ padding:10px } a :悬停{后台： # CCC颜色： # # 3399 ff } a .悬停{高度：25 px线高：25 px背景：红色；color:#ffffff}a，area { BLR : e-expression(这。onfocus=这个。blur())} : focus {-moz-outline-style : none；}/style/head dydiv id=' menu ' ul lia href=' JavaScript : void(0)' class=' hover ' onclick=' change name(0)' hide focus=' true '我的菜单/a/Li lia href=' JavaScript : void(0)' onclick='更改名称(1)'隐藏焦点=' true '网页模板/a/Li lia href=' JavaScript : void(0)' onclick='更改名称(2)'隐藏焦点=' true '精品代码/a/Li lia href=' JavaScript : void(0)' onclick='更改名称(3)'隐藏焦点=' true '设计素材/a/Li lia href=' JavaScript : clear()；'hidefocus='true '恢复初始/a/Li/ul/div脚本语言=' JavaScript '函数更改名称(c，cl){ var d=document。getelementbyid('菜单').getElementsByTagName(' a ')；if(！cl) { writeCookie('悬停，c，222)；} c=readCookie('悬停')?readCookie(')悬停): cfor(I=0；id.lengthi ) { d[i].className=i==c '？悬停":";} }函数writeCookie(名称、值、小时){ var expire=如果（小时！=null) { expire=new Date((new Date()).getTime()(小时数* 3600000);expire='；expires=' expire。toggmtstring()；}文档。cookie=name '='转义符(值)过期；}函数readCookie(名称){ var cookieValue=var search=name '=if(document。饼干。长度0){ offset=document。饼干。indexof(搜索);如果(偏移量！=-1){ offset=search。长度；end=文档。饼干。indexof('；偏移量);if(end==-1)end=document。饼干。长度；cookieValue=une scape(文档。饼干。子串(偏移，结束))} }返回cookieValue}函数clear(){ writeCookie('悬停','',222);文件。位置=文档。位置。href}changename(0，1)/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。