基于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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
vue-swiper的使用教程
Aug 30 Javascript
Echarts动态加载多条折线图的实现代码
May 24 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
python 常用的基础函数
2018/07/10 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python接口自动化框架实战
2020/12/23 Python
怎样声明子类
2013/07/02 面试题
单身联谊活动方案
2014/01/29 职场文书
战略合作意向书范本
2014/04/01 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
施工安全承诺书
2014/05/22 职场文书
土建工程师岗位职责
2014/06/10 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python