刷新页面后怎样让hover样式停留不消失

一、网站导航栏

　　我们所熟知的网站导航栏，无非就是网站标题以横、纵向方式排列，用户点击以后进入相应的页面来展示网站内容，达到传达信息的目的。

　　用户点击进入一个页面，如果在刷新后此导航栏有文字有相应的颜色、背景变化，那么将会有一个很好的用户体验，此时就涉及到CSS的hover样式、jQuery的触发事件了。

二、hover样式

鼠标扫过文字时，文字的背景、颜色变化，这样做很简单：

a:hover{}，一句话就可以搞定；但如果要点击刷新后仍然存在鼠标刷新的样式，就有点上层次了。

具体问题具体分析：

1、根据使用的不同框架来定

2、CMS自己封装了相应的方法

3、导航栏单独做成头部文件，利用ajax无刷新技术得以实现头部无刷新，只变化内容区域就更简单点

4、导航栏每个按钮都有固定的、以ID结尾的链接（以DEDE为例）

/plus/list.php?tid=1、

/plus/list.php?tid=2、

/plus/list.php?tid=3、

/plus/list.php?tid=4

三、简单实现步骤

下面就讲第四种情况的实现方法（其它3种因为本人能力有限，待以后继续更新）：

HTML :很简单的导航条代码

    <ul>    <li><a href="/plus/list.php?tid=1"></a></li><li><a href="/plus/list.php?tid=2"></a></li><li><a href="/plus/list.php?tid=3"></a></li><li><a href="/plus/list.php?tid=4"></a></li><li><a href="/plus/list.php?tid=5"></a></li></ul>

jQuery: hover方法、each方法判断是当前页面第一个a标签对象的href属性

    $(function(){    $("ul>li").hover(function(){$(this).children("a").addClass("");},function(){$(this).children("a").removeClass("");$("ul>li>a").each(function(){$this = $(this);if ($this[0].href == String(window.location)){$this.addClass("");}});});$("ul>li>a").each(function(){$this = $(this);if ($this[0].href == String(window.location)){$this.addClass("");}});});

因为有多个a标签，所以要遍历当前页面所在第一个a标签对象，获取它的href属性，来与所在页面链接做对比，如果符合就添加对应的hover css样式；但问题来了，样式已经添加，鼠标经过此文字离开时又移除了该属性，我们再次将下面这条语句复制进hover移除后的句子后面，再次强制添加该属性，就成功解决了！

四、遗留问题、改进方向

1、 /plus/list.php?tid=1，该导航按钮此时有了我们需要的样式，但如果点击此导航页面下面的子链接，页面变成了子链接所在的页面，但还属于此导航栏目的子栏目，此时的导航按钮就失去了样式。

2、利用jQuery实现浏览器兼容性更加好，css3等新技术可以对自己的个人网站做实验。

3、能让子栏目智能识别父栏目才是解决问题的最好办法。

转载于:https://blog.51cto.com/smili/1683183

刷新页面后怎样让hover样式停留不消失相关推荐

浏览器刷新页面后回到顶部_当你在浏览器中，忘记了曾经的登录密码怎么办......
当你在浏览器中,忘记了曾经的登录密码怎么办... 前言你还在为使用浏览器的时候,忘记密码而烦恼吗?今天要分享的不为人知的小技巧,利用前端技术原理来帮助你找回原密码. 在我们使用各种网站登录时,总会勾 ...
使用vue 刷新页面后state数据被清空的问题（刷新总是跳转到登陆页面）
在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex ...
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法参考文章: (1)解决element-ui中el-m ...
html下拉框选择后自动刷新,html select 下拉框刷新页面后保留上一次选择的值
常用场景组合条件查询点击查询/刷新页面,包括input输入框\复选框等在内的组件都可以通过前端设置value="{{id}}",后台发送的数据包括对应的字段,从而实现刷新后保留上 ...
vue-router刷新页面后回到首页
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.[[点击跳转到网站.]] 今天给大家分享一个小知识点!注意查收! 平时我们再写vue项目配置完路由之后会发现他不会自动 ...
页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...
vue中tab选项卡刷新页面后保持选中状态_Altium Designer中的快捷键汇总
双十一活动详情请联系客服了解在任何软件环境中,为了提高工作效率,你可以做的一件事就是学习快捷键.击键比将鼠标小心地放在按钮上或点击菜单来查找命令更有效,一旦用熟悉了,它们就变成了您的第二天性.本文将 ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法...
解决办法是给menu的default-active绑定route.path 形如: <el-menu :default-active="$route.path" ...> ...
php自动切换背景,刷新页面后让WordPress背景随机切换
作者:matrix 被围观: 2,901 次发布时间:2013-10-10 10 条评论 »

刷新页面后怎样让hover样式停留不消失

刷新页面后怎样让hover样式停留不消失相关推荐

最新文章

热门文章