Superfish高亮显示当前页面的菜单项

Superfish是一个不错的jQuery下拉菜单插件,被广泛用于各种网站项目,但是其一个显著不足是无法为当前页面的菜单项添加高亮显示效果,本文将介绍如何解决这个问题。

关键字:Superfish菜单高亮、Superfish高亮显示当前页面的菜单项、Superfish高亮。

superfish的使用很简单,其参数如下:

  1. $.fn.superfish.defaults = {   
  2.   popUpSelector: 'ul,.sf-mega',      // selector within menu context to define the submenu element to be revealed   
  3.   hoverClass:    'sfHover',          // the class applied to hovered list items   
  4.   pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page   
  5.   pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass   
  6.   delay:         800,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing   
  7.   animation:     {opacity:'show'},   // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open   
  8.   animationOut:  {opacity:'hide'},   // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed   
  9.   speed:         'normal',           // speed of the opening animation. Equivalent to second parameter of jQuery’s .animate() method   
  10.   speedOut:      'fast',             // speed of the closing animation. Equivalent to second parameter of jQuery’s .animate() method   
  11.   cssArrows:     true,               // set to false if you want to remove the CSS-based arrow triangles   
  12.   disableHI:     false,              // set to true to disable hoverIntent detection   
  13.   onInit:        $.noop,             // callback function fires once Superfish is initialised – 'this' is the containing ul   
  14.   onBeforeShow:  $.noop,             // callback function fires just before reveal animation begins – 'this' is the ul about to open   
  15.   onShow:        $.noop,             // callback function fires once reveal animation completed – 'this' is the opened ul   
  16.   onBeforeHide:  $.noop,             // callback function fires just before closing animation – 'this' is the ul about to close   
  17.   onHide:        $.noop,             // callback function fires after a submenu has closed – 'this' is the ul that just closed   
  18.   onIdle:        $.noop,             // callback function fires when the 'current' submenu is restored (if using pathClass functionality)   
  19.   onDestroy:     $.noop              // callback function fires after the 'destroy' method is called on the menu container   
  20. };  

以上参数列表及说明来自superfish官方网站:http://users.tpg.com.au/j_birch/plugins/superfish/options/

当用于独立项目的时候,就需要考虑为当前页面的菜单项目添加高亮效果

需要添加的javascript代码:

  1. var path = window.location.pathname.split('/');   
  2. path = path[path.length-1];   
  3. if (path !== undefined) {   
  4.   $(".sf-menu")   
  5.     .find("a[href$='" + path + "']"// gets all links that match the href   
  6.     .parents('li')  // gets all list items that are ancestors of the link   
  7.    // .children('a')  // walks down one level from all selected li's   
  8.     .addClass('current');   
  9. }  

 

上面的javascript代码是将预定义好的高亮效果(上例中的红色字体,带下划线)添加给li,如果想添加给a的话,去掉上面代码中第七行最前面的注释符号即可。


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧校园整体解决方案是响应国家教育信息化政策,结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础,旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变,通过自动数据采集、智能分析和按需服务,实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通,确保系统能够满足不同用户角色的需求,并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面,构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等,以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能,增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术,实现人员和设备的智能管理,提高校园运营效率。 智慧教学部分,方案提供了智慧学习系统和精品录播教室方案,支持专业级学习硬件和智能化网络管理,促进个性化学习和教学资源的高效利用。同时,教学质量评估中心和资源应用平台的建设,旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理,通过智慧教室管理系统实现教室环境的智能控制和能效管理,打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设,将作为智慧校园的核心和入口,提供教务、一卡通、图书馆等系统的集成信息。 总体而言,智慧校园整体解决方案通过集成先进技术,不仅提升了校园的信息化水平,而且优化了教学和管理流程,为学生、教师和家长提供了更加便捷、个性化的教育体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值