基于jquery实现导航菜单高亮显示(两种方法)


Posted in Javascript onAugust 23, 2015

项目需求:

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

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

效果图如下:

基于jquery实现导航菜单高亮显示(两种方法)

示例代码一:

具体示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我爱学习</title>
<style>
body,ul,ol,li,div,p{margin:0px;padding:0px;}
ul{list-style-type:none;border:1px solid blue;background:#4f5b93;height:45px;}
ul li{float:left;heihgt:45px;line-height:45px;width:100px;text-align:center;}
ul li a:link,a:visited{color:#fff;text-decoration:none;}
.act{background:#ff6600;}
</style>
<script src="../jquery.js"></script>
<script>
$(function(){
$('ul li').eq(0).addClass("act");
 $('ul li').each(function(){
  $(this).click(function(){
    $(this).addClass("act").siblings().removeClass("act");
   })
 })
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.52aixuexi.com/">首页</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/suibi/">随笔</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/sucai/">素材</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/biancheng/">编程</a></li>
</ul>
</body>
</html>

示例代码二:

在菜单层的链接加上一个rel属性,保存href属性即:

<div id="menu" class="main-nav">
      <dl>
       <dt><a href="/C000001916" class="current">首页<span class="mnl"></span></a></dt>
      </dl>
      <dl>
        <dt><a href="/C000001919?lmbm=1" <span style="color: #ff0000;">rel="/C000001919?lmbm=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 href="#">技术架构</a>
        </dd>
      </dl>
      <dl>
        <dt><a href="/C000001919?lmbm=2" <span style="color: #ff0000;">rel="/C000001919?lmbm=2"</span>>产品介绍<span class="mnl"></span></a></dt>
        <dd class="sn-c sn3">
          <a href="#">产品理念</a>
          <em>|</em>
          <a href="#">发展历程3</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
    </div>

然后利用浏览器地址栏中的URL和rel对比,如果相等就在当前的<a>标签加上class,同时移除其它<a>标签的class.<script type="text/javascript">

var urlstr = location.href;
//获取浏览器的url
 var urlstatus=false;



//标记
 //遍历导航div
 $("#menu a").each(function () {
//判断导航里面的rel和url地址是否相等
  if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
//当前样式保持
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

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

所以我的思路是这样的

既然url不一样,那就找导航-->分类-->新闻之间的关系了.他们的对应关系是一个导航下可能有多个分类,一个分类下可能有多篇新闻.那么逆向的来说,每一篇新闻或者分类都对应一个导航.那么在对应的的分类页面和新闻页面都定义一个变量就是导航标识.然后修改导航<div>的<a>标签的rel属性.该属性与该变量对比,如果一样就改当前的class.

以上内容就是通过两种方式给大家介绍基于jquery实现导航菜单高亮显示,希望对大家有所帮助。

Javascript 相关文章推荐
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
JS canvas绘制五子棋的棋盘
May 28 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 #Javascript
微信JSSDK上传图片
Aug 23 #Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 #Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 #Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 #Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 #Javascript
javascript中Array()数组函数详解
Aug 23 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
宿舍违规检讨书
2014/01/12 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫