jquery 根据网站url给导航nav添加active效果
后台的同事因为把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效果的更多相关文章
- 用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...
- 利用jquery实现网站中对应栏目下面内容切换效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用jQuery中live为动态生成Dom添加datepicker效果
利用Live属性,focus时重新绑定控件 $(".datepickerDom").live("focus", function () { $(this).da ...
- 为SharePoint网站创建自定义导航菜单
转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- jquery实现的个人中心导航菜单
之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览 源 ...
- AngularJS 导航栏动态添加.active
在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...
- MVC5 网站开发之八 栏目功能 添加、修改和删除
本次实现栏目的浏览.添加.修改和删除. 栏目一共有三种类型. 常规栏目-可以添加子栏目,也可以添加内容模型.当不选择内容模型时,不能添加内容. 单页栏目-栏目只有一个页面,可以设置视图. 链接栏目-栏 ...
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Sass函数--颜色函数--Opacity函数
Opacity函数简介 在 CSS 中除了可以使用 rgba.hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而 ...
- memcached session共享
http://www.baidu.com/s?wd=memcached%20session%E5%85%B1%E4%BA%AB&rsv_spt=1&issp=1&f=8& ...
- IIS报500.0错误
IIS安全里面配置:Everyone.IUSR.IIS_IUSRS 参考地址:http://blog.chinaunix.net/uid-21375345-id-3213631.html
- C# 温故而知新:Stream篇(—)
C# 温故而知新:Stream篇(—) 目录: 什么是Stream? 什么是字节序列? Stream的构造函数 Stream的重要属性及方法 Stream的示例 Stream异步读写 Stream 和 ...
- 初学QML之QML和C++混合方法
混合使用QML和C++的方法 1加载一个QML组件,然后从 C++对其进行操作: 2直接将一个C++对象及其属性嵌入到QML组件: 3定义一个新的QML元素(通过基于QOject的C++类)并在QML ...
- Java系列--第一篇 Maven+Spring+Spring MVC+mybatis 示例
基于Maven的Spring+SpringMVC+Mybatis的一个小项目的搭建,由于使用Maven3.1.0管理,所以Spring等都将使用的是时下(2013/9/8)最新的版本.即从http:/ ...
- ACM ICPC Team
Link: https://www.hackerrank.com/challenges/acm-icpc-team/submissions/code/11617807 def count_max_to ...
- C语言变量的存储类别
我们知道,从变量的作用域(即从空间)角度来分,可以分为全局变量和局部变量. 从另一个角度,从变量值存在的作时间(即生存期)角度来分,可以分为静态存储方式和动态存储方式. 静态存储方式:是指在程序运行期 ...
- 存储过程--表变量和while简单运用
1.sql创建表/*订单*/CREATE TABLE Orders ( PRIMARY KEY(Id), Id int, Name varchar(20))2.存储过程ProTestDT 1)创 ...
- linux源码安装nodejs
如何在linux上安装nodejs环境 到网下载安装文件node-v5.10.1-linux-x64.tar.gz. 将源码包上传到linux的/usr/local/node/目录下,在该目录下解 ...