• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 不用Cookie的仿刷新二级高亮菜单

不用Cookie的仿刷新二级高亮菜单

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含Cookie,高亮菜单等相关知识,佚名 希望在学习及工作中可以帮助到您
这也是我经常采用的方式,一般的网页至少都有两级菜单,第一个是顶部的总导航条菜单,另一个是左侧的分类导航菜单。一般要求在一级菜单高亮下二级菜单也能记录当前状态。
对于一个包含顶部菜单的页头区域如果固定不变的,也就是它不用每次都重新加载,这种情况下用纯CSS或JS方式可以很容易地实现,但今天我要谈的不是这种,今天说的是一级菜单和二级菜单在每个页面中都是动态加载的,也就是它们是作为用户控件的方式载入的。这种情况下要想记录菜单的高亮状态是一件比较困难的事情。
当然,你可能会说,用cookie可以记录每个页面加载时上次记录的高亮状态,是的,它确实可以记录,但是这种方式在一些复杂的包含许多子页面的应用中,会给用户造成许多困扰和麻烦。比如在cookie生存周期内,重新打开这个项目时,此时cookie的生存周期还没有完全结束,它还记录着上次保存的状态,而这时页面地址已经发生了变化,那么当前高亮的菜单所指向的就不是用户所希望看到的页面。实践证明,这个cookie的生存周期无论你设置多长都不能完美解决用户恶意刷新页面的状况。这确实是一件糟糕的事情!
那么有没有一种较好的办法来解决这种状况呢?
答案是有的。我们知道要解决这个问题,最理想的办法是在每个页面加载时,根据页面的url地址显式地设置当前菜单的高亮样式。这能完美地解决此类问题,并且这种方式无论用户如何恶意点击刷新按钮,高亮状态依旧保持不变。 知道了原理,要实现起来就容易多了。
结构层
一级菜单结构层:

IE5.5,IE6,IE7,IE8,FF3,TT,Maxthon,Ch

您可能想查找下面的文章:

  • 不用Cookie的仿刷新二级高亮菜单

相关文章

  • 2017-08-06html+css+div实现电影结束效果
  • 2017-08-06基于firebug的firefox扩展 css usage
  • 2017-08-06css控制div中元素居中的示例
  • 2017-08-06css中position属性使用详解
  • 2017-08-06绝对定位(absolute)和浮动定位(float)分析
  • 2017-08-06ie,360下html锚点失效问题解决
  • 2017-08-06IE6的双倍,3px,注释引起的文字错位等几个BUG解决方法
  • 2017-08-06CSS浏览器兼容性Hack大全
  • 2017-08-06借助CSS定位来实现把一个DIV放到另一个div右下角
  • 2017-08-06IE6789,FF之间Css Hack整理

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 深入探究CSS中Animations和Transitions的工作原理
    • 非常漂亮的CSS3百叶窗焦点图动画
    • css中的content: "." 有什么用?为什么要用他?
    • css样式显示省略号自定义宽度超过隐藏显示省略标记
    • CSS3点击按钮实现背景渐变动画效果
    • 让文字旋转270度的css样式
    • css float浮动属性的深入研究及详解拓展(一)
    • 对网页中层的固定实现代码
    • CSS实现限制字数功能当对象内文本溢出时显示省略标记
    • 重新认识一下网页标准

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有