基于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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /title我爱学习/titlestylebody，ul，ol，Li，div，p { margin33600pxpadding:0px} ul { list-style-type : none；border:1px纯蓝；背景# 4f5b93height:45px} ul li { float:leftheihgt:45px线高：45 px；宽度width:100px文本对齐：居中；}ul li a:link，a:visited { color: # fff文本装饰： none；}.act { background: # ff6600}/stylescript src='http:/jquery . js//script script $(function(){ $(' ul Li ')。eq(0)。addCLaSS(' act ')；$('ul li ')。每个(函数(){ $(this))。单击(function(){ $(this))。addClass('act ')。兄弟姐妹()。remove CLaSS(' act ')；})}))}))/script/headdyullia href=' http://www.52aixuexi.com/'home页面/a/Lilia href=' http://www.52aixuexi.com/wdwzml/suibi/'essay/a/Lilia href=' http://www.52aixuexi.com/wdwzml/sucai/'material/a/lilia href=' http://www.52aixuexi.com/wdwzml/bianchen/'programming/a/Li/ul/body/html示例代码2:

在菜单层的链接中添加rel属性，并保存href属性：

div id=' menu ' class=' main-nav ' dldta href='/c 00001916 ' class=' current '主页span class=' mnl '/span/a/dt/dldta href='/c 00001919？lmbm=1 ' span style=' color : # ff 0000；'rel='/C000001919？Lbm=1'/span新闻中心span class=' mnl '/span/a/dt DD class=' sn-c ' a href=' # '产品概念2/a em|/em a href='# '开发历史/a em|/em a href='# '应用范围/a em |/em a . lmbm=2 ' span style=' color : # ff 0000；rel='/C000001919？Lbm=2'/span产品介绍span class=' mnl '/span/a/dt DD class=' sn-csn 3 ' a href=' # '产品概念/a em|/em a href='# '发展历史3/a em|/em a href='# '应用范围/a em |/。技术架构/a /dd /dl /div然后比较浏览器地址栏中的URL和rel。如果它们相等，则将类添加到当前的A标记中，并移除该类。脚本类型=' text/JavaScript '的其他A标签同时

var urlstr=location.href//获取浏览器URL的url var urlstatus=false//标记//遍历导航div $ ('# menuba ')。每个(函数(){//判断导航中的rel和url地址是否相等如果((urlstr'/')。($ (this)的索引。attr(' rel ')-1 $(这个)。attr(。='') { $(这个)。add CLaSS(' cur ')；urlstatus=true} else { $(this)。remove CLaSS(' cur ')；} });//当前样式保留if(！urlstatus) {$('#menu a ')。eq(0)。add CLaSS(' cur ')；}/script基本上可以达到效果，但是如果导航下有分类，如图所示，分类的url和导航不能匹配，然后新闻的url和导航的url也不能匹配，所以还是有点废话.我该怎么办？

所以我的思路是这样的

既然网址不同，那就找找导航-分类-新闻的关系。它们的对应关系是一个导航下可能有多个分类，一个分类下可能有多个新闻。相反，每个新闻或分类对应一个导航。然后在对应的分类页面和新闻页面上定义一个变量，就是导航标识。然后修改导航div的A标签的rel属性。将此属性与此变量进行比较，如果相同，则进行更改。

以上内容是从两个方面介绍基于jquery的导航菜单高亮，希望对大家有所帮助。