JQuery一行搞定当前面所对应的导航菜单变亮效果

前提:所有页面用的是一个母板页,并且导航菜单放在母板页

HTML代码如下:

  <div class="mainnav">
                <ul class="banner">
                    <li class="index"><a href=HTTP://A.COM/HOME>首页</a></li>
                    <li class="index"><a href=HTTP://A.COM/NEWS>考试资讯</a></li>
   
                    <li class="index hover"><a href=HTTP://A.COM/CLASS>辅导课程</a></li>
                    <li class="index"><a href=HTTP://A.COM/STAR>星级服务</a></li>
 
                    <li class="index"><a href="http://bbs.A.com/">学习论坛</a></li>
 
                    <li class="index"><a href=HTTP://A.COM/Teacher>名师团队</a></li>
</ul>
一小段C#代码,用来得到URL的HOST的部分

    <%   string aa = Request.Url.AbsolutePath;  %>
而一行的JQUERY代码如下:
<script type="text/javascript">
        $(function() {

$(".mainnav>.banner").find("li").find("a[href$='<%=aa%>']").closest("li")

.addClass("hover").siblings().removeClass("hover")

        });
    </script>
本文转自博客园张占岭(仓储大叔)的博客,原文链接:JQuery一行搞定当前面所对应的导航菜单变亮效果,如需转载请自行联系原博主。
时间: 2024-10-10 11:07:34

JQuery一行搞定当前面所对应的导航菜单变亮效果的相关文章

基于jQuery实现以手风琴方式展开和折叠导航菜单_jquery

本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.jb51.net/" /> <title></title> <style

jQuery实现两款有动画功能的导航菜单代码_jquery

本文实例讲述了jQuery实现两款有动画功能的导航菜单代码.分享给大家供大家参考.具体如下: 这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

jQuery实现鼠标悬停背景翻转的黑色导航菜单代码_jquery

本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html

jQuery实现非常实用漂亮的select下拉菜单选择效果_jquery

本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果.分享给大家供大家参考,具体如下: 先来看如下运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

基于jquery淘宝商城快速导航菜单切换效果

这是一个非常流畅的菜单展示效果,应用在亚马逊(amazon.cn)上,当你上下移动鼠标的时候, 二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉. 这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. 效果图片 实例代码  代码如下 复制代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name=&qu

JQuery模拟FLASH导航菜单动画效果

 代码如下 复制代码 <div class="navBox">  <ul class="nav fr cf fw" id="nav">   <li>    <a class="cur" href="http://www.111cn.net" target="_blank"><strong>首页</strong><

基于jquery的slideDown和slideUp做手风琴_导航菜单

赵本山,央视春晚 央视春晚台柱子赵本山在2011年央视春晚演出后,不得不接受紧急治疗.从个体人性角度祝愿这老爷子健康长寿.但诺将其身体状况作为一种文化隐喻,它却预示着CCTV洗脑愚乐文化正面临无可奈何花落去寿终正襟的命运. 支持打拐 据媒体报道,全国政协委员濮存昕也表示对打拐的支持.他建议全国公安系统应尽快建立起一支专业的打拐队伍,各地公安机关应当设立专门的打拐机构,配备必要的编制和专项经费. 爱的真言 我曾经喜欢八八,坚定只有八八才能给川儿幸福.只是最近几集,你让我情何以堪?感动,心疼,纠结,

jquery实现无限分级横向导航菜单的方法

 这篇文章主要介绍了jquery实现无限分级横向导航菜单的方法,实例分析了基于jQuery插件操作html与对应样式实现导航菜单效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 代码如下: (function($){ $.fn.extend({ droplinemenu: function(configs) { var configs = $.e

jQuery仿Flash上下翻动的中英文导航菜单实例

 这篇文章主要介绍了jQuery仿Flash上下翻动的中英文导航菜单,实例分析了jQuery实现Flash反动特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery仿Flash上下翻动的中英文导航菜单的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x