基于jquery 实现导航条高亮显示的两种方法
创始人
2024-02-17 01:21:54
0

本篇文章是基于jquery实现导航菜单高亮显示,当点击不同导航菜单实现当前点击的菜单是高亮的,有需要的朋友可以关注下本文

实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式。

点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的.

效果图如下:

 

示例代码一:

具体示例代码如下:





导航条高亮显示







示例代码二:




导航条高亮显示



栏目一

注意:

1、 location.href 用于获取当前页面的url

2、 当前页面应该保存为index.html

3、 indexOf 用于检索当前url中是否存在a中对应的href

4、 每个html中都拥有相同的导航结构

5、 eq(index/-index) 获取当前链式操作中第N个JQuery对象,返回JQquery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1代表倒数第一个。

这个也能基本实现效果,但是如果在导航下如果有分类,如图.这样分类url和导航的url就不能匹配了,然后新闻的url和导航的url也不能匹配.所以还是有点扯淡.....那怎么办呢?

所以我的思路是这样的

既然url不一样,那就找导航-->分类-->新闻之间的关系了.他们的对应关系是一个导航下可能有多个分类,一个分类下可能有多篇新闻.那么逆向的来说,每一篇新闻或者分类都对应一个导航.那么在对应的的分类页面和新闻页面都定义一个变量就是导航标识.然后修改导航

相关内容

热门资讯

一次性信用修复政策来了!这些法... 今天(22日),中国人民银行发布通知,实施一次性信用修复政策,支持信用受损但积极还款的个人高效便捷重...
“重庆调解在线”数字应用累计办... 12月19日,市人大监察司法委、市政协社法委和市司法局举办2025年联合开放日暨调研活动。据了解,本...
京尹律所律师王亭玉、刘杉代理侵... 01 基本案情 武汉某传媒公司是一家主要从事广告设计、动画设计、信息咨询、网络运营、数据处理等为主...
云南城投董事会通过内部机构调整... 观点网讯:12月22日,云南城投置业股份有限公司召开第十届董事会第三十八次会议。 会议审议并通过了三...
优衣库曾因隐私权纠纷被起诉 雷达财经讯,据媒体报道,近日,优衣库部分门店被指“偷拍”消费者来防盗。在社交媒体上,部分消费者反映,...
一次性信用修复政策发布! 12月22日,中国人民银行发布通知,实施一次性信用修复政策,支持信用受损但积极还款的个人高效便捷重塑...
转错账难追讨?五华法院调解止纷... 当下,银行转账等快捷支付方式为老百姓的生活提供了便利,然而遇到转错账、对方不返还怎么办?近日,五华法...
骄成超声(688392)披露提... 截至2025年12月22日收盘,骄成超声(688392)报收于122.82元,较前一交易日上涨7.6...
男子把80万元奔驰借给朋友却被... 男子把80万元奔驰借给朋友却被对方3万元抵押,律师:涉嫌诈骗