导航跳转后保持选中状态 jquery高亮当前选中菜单
来源:互联网 发布:centos7端口聚合 编辑:程序博客网 时间:2024/05/23 19:16
功能需求:
今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式。
简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片)
解决方法:
通过查看实例,我们需要用到JS中的jquery来实现这种效果,也可以通过CSS设置不同页面的a:hover实现效果,不过这显然是比较笨拙的方法。
那么,如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
效果图:
代码如下:
<script type=”text/javascript” src=”jquery.min.js”></script><style>.menu { padding:0; margin:0; list-style-type:none;}.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}.cur{ background:#D96C00; font-weight:bold;}</style><ul class=”menu” id=”menu”><li><a href=”a.html”>首页</a></li><li><a href=”b.html”>SEO优化</a></li><li><a href=”c.html”>生活娱乐</a></li></ul><script type=”text/javascript”>var urlstr = location.href;//alert((urlstr + ‘/’).indexOf($(this).attr(‘href’)));var urlstatus=false;$(“#menu a”).each(function () {if ((urlstr + ‘/’).indexOf($(this).attr(‘href’)) > -1&&$(this).attr(‘href’)!=”) {$(this).addClass(‘cur’); urlstatus = true;} else {$(this).removeClass(‘cur’);}});if (!urlstatus) {$(“#menu a”).eq(0).addClass(‘cur’); }</script>
0 0
- 导航跳转后保持选中状态 jquery高亮当前选中菜单
- jQuery高亮当前选中菜单
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
- jquery 给当前页面或者跳转后页面对应的导航栏添加选中样式
- 当前栏目高亮/选中状态代码
- jquery实现导航菜单点击切换选中时高亮状态
- cxGrid失去焦点后如何继续保持选中单元的高亮状态
- 安卓ListView选中后保持高亮状态且两级联动带图标
- 安卓ListView选中后保持高亮状态,且两级联动带图标(升级版)
- 让CListCtrl选中行保持其蓝色高亮状态
- GridView 翻页后保持checkbox选中状态
- ListView的item选中后保持选中时的高亮颜色。
- Jquery的li导航菜单选中
- Jquery之导航选中记住状态
- 鸡与蛋问题(先有Class还是先有Object)
- Angela.js 通用方法集
- HTTP中的GET与POST
- js封装ajax函数
- RMAN-06817: Pluggable Database CHARLESPDB cannot be backed up in NOARCHIVELOG mode.
- 导航跳转后保持选中状态 jquery高亮当前选中菜单
- c++实验3——个人所得税计算器
- 创建COM对象大全
- HashMap的设计原理和实现分析
- 每个Java类都有的equals方法
- zencart Fatal error: Call to a member function add_current_page()
- Spring事务Transaction配置的五种注入方式详解
- Win7使用附件中的远程桌面连接Ubuntu(xrdp方法)
- <蓝桥杯>算法训练 猴子分苹果