后台的同事因为把nav公用了,所以无法单页添加active,一下方法通过判断url的后缀给当前页添加active

	$(function(){
var _nava= $('.nav .nav-wrapper a');
var _url = window.location.href;
var _host = window.location.host;
for(var i = 0; i<_nava.length ; i++){
var _astr = _nava.eq(i).attr('href');
if(_url.indexOf(_astr) != -1){
_nava.eq(i).addClass('active').siblings().removeClass('active');
}else if(_url == ('http://'+_host+'/')){
_nava.eq(0).addClass('active').siblings().removeClass('active');
}
}
})

由于后台同事,类别分配不同往常;在点击一个导航进入后,可以正常运行,但是当点击某一条信息进入后,由于网址又是一个新的html,并没有包括在原来的类别内,之后通过网站地图判断

<script type="text/javascript">
$(function(){
var _nava= $('.nav .nav-wrapper a');
var _url = window.location.href;
var _host = window.location.host;
var _type = $('.news .position-search .position-search-wrapper .position a').eq(1).text();//网站地图“首页>新闻类别>新闻详情”
for(var i = 0; i<_nava.length ; i++){
var _atext = _nava.eq(i).text();
var _astr = _nava.eq(i).attr('href');
if(_url.indexOf(_astr) != -1 || _atext == _type){//地图的类别和导航的文本对比,相同在该导航添加active
_nava.eq(i).addClass('active').siblings().removeClass('active');
}else if(_url == ('http://'+_host+'/')){
_nava.eq(0).addClass('active').siblings().removeClass('active');
}
}
})
</script>

  

jquery 根据网站url给导航nav添加active效果的更多相关文章

  1. 用jq动态给导航菜单添加active

    点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...

  2. 利用jquery实现网站中对应栏目下面内容切换效果。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 利用jQuery中live为动态生成Dom添加datepicker效果

    利用Live属性,focus时重新绑定控件 $(".datepickerDom").live("focus", function () { $(this).da ...

  4. 为SharePoint网站创建自定义导航菜单

    转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...

  5. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  6. jquery实现的个人中心导航菜单

    之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览   源 ...

  7. AngularJS 导航栏动态添加.active

    在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...

  8. MVC5 网站开发之八 栏目功能 添加、修改和删除

    本次实现栏目的浏览.添加.修改和删除. 栏目一共有三种类型. 常规栏目-可以添加子栏目,也可以添加内容模型.当不选择内容模型时,不能添加内容. 单页栏目-栏目只有一个页面,可以设置视图. 链接栏目-栏 ...

  9. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. C#中public、private、protected、internal、protected internal (转载)

    在C#语言中,共有五种访问修饰符:public.private.protected.internal.protected internal.作用范围如下表:访问修饰符 说明public 公有访问.不受 ...

  2. F5(调试)和服务器控件

    一.调试 背景: 今天调试的时候发现我进入的网址是http://×××.com:7813/webaspx/System/Login.aspx(由于代码在公司,我就没有截图,等了半天显示无法加载该页面) ...

  3. Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

    我引起此原因的功能如下: 在aspx页面添加按钮 JS方法: function downPPT() { $("#Btn_DownPPT").click();    } <bo ...

  4. TelerikUI_RadGrid_Filter 自定义方法

    要设置 EnableLinqExpressions="false",搞了3,4个小时没反应,就是没有设置这个 Protected Sub btnSearch_Click(sende ...

  5. angularjs字符串插值($interpolate)

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  6. set用法总结

    set集合用于存放不重复的元素 template <class Key, class Compare = less<Key>, class Alloc = alloc> cla ...

  7. File类详解

    一.File类: File类时io包中唯一代表磁盘文件本身的对象.File类定义了一些与平台无关的方法来操作文件,可以通过调用File类中的方法,实现创建.删除.重命名文件等. File类的对象主要用 ...

  8. 模拟IIC总线汇编程序软件包

    一.概述 为了非常方便地对 I2C 从器件进行快速的.正确的读写操作,我们为此而设计出虚拟 I2C 总线操作平台软件包.本软件包是主方式下的虚拟 I2C 总线软件包,只要用户给子程序提供几个主要的参数 ...

  9. 必须得是一万小时的 刻意训练(deliberate practice)

    成功素质1:一万小时与格物致知 “格物致知14”的概念,我是从张银奎11老师那里了解到的.它的意思是“推究事物的原理,从而获得知识”,跟我在<透过现象看本质 - 写在观看WWDC 2016 Ke ...

  10. 《Programming WPF》翻译 第9章 1.自定义控件基础

    原文:<Programming WPF>翻译 第9章 1.自定义控件基础 在写一个自定义控件之前,你需要问的第一个问题是,我真的需要一个自定义控件吗?一个写自定义控件的主要原因是为了用户界 ...