宝哥软件园

jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

编辑:宝哥软件园 来源:互联网 时间:2021-09-08

本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果。分享给大家供大家参考。具体如下:

这是一款jquery菜单特效,点击后高亮背景,个性的菜单特效。网上见到比较多的菜单了,不过像这样这么简单的方法来实现却不多见,本菜单整体简洁,点击导航栏上的任意菜单项后,该菜单项的背景变成黑色,并且鼠标移走后,仍然固定保持黑色,记住了菜单的位置。

运行效果如下图所示:

在线演示地址如下:

http://演示。JB 51。net/js/2015/jquery-菜单-设置-焦点-样式-代码/

具体代码如下:

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejquery点击后高亮背景的菜单特效/title style * { margin 33600;划水:0;列表式:无;} body { font : normal 14px/24px ' MicroSoft YaHei ';}.cotr { width :960 pxh three :32 px线高:32 px背景技术: # 999;margin:0 auto}。cotrs a { height:32px线高:32 pxcolor: # fff文本装饰:无;padding:0px 10px显示:块;float:left}。cots a :悬停{ text-装潢:无;背景技术: # 000;}.cots a .这个类{ text-decoration : none背景技术: # 000;}/style/head dybrbrbrdiv class=' cotr ' a href=' JavaScript : ' class=' this class '首页/aa href='javascript: '菜单导航/aa href='javascript: '时间日期/aa href='javascript: '焦点图/aa href='javascript: '选项卡标签/aa href=' JAVAScript : ' jquery特效/aa href='javascript: '在线客服/aa href='javascript: '广告代码/aa href='javascript: '相册代码/aa href='javascript: '图片特效/aa href='javascript: '名站特效/aa href='javascript: '其他代码/aa href=' JavaScript : ' html 5/a/div脚本src=' http : jquery-1。9 .1 .量滴js '/script script $(function(){ var cots=$(').cotr a ';帆布床。点击(函数(){ $(this)).addClass('thisclass ').兄弟姐妹()。移除CLaSS(" this CLaSS ");});});/script div style=' text-align : center;余量:50 px 0;font : normal 14px/24px ' MicroSoft YaHei ';/div/body/html希望本文所述对大家的jquery程序设计有所帮助。

更多资讯
游戏推荐
更多+