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/ ...
随机推荐
- MVC5富文本编辑器CKEditor配置CKFinder
富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- asp net 编程问题 实现下一篇 和上一篇效果
首先是access数据库,有一个名为news的表,里面有三个字段,分别为id,classid 和name 其中id为主键,classid可以重复 现在有以下数据: id classid name 1 ...
- ASP.Net MVC与WebForm的区别
- linux shell脚本连接oracle查询数据插入文件和日志文件中
#!/bin/sh sqlplus "用户名/密码@数据库"<<EOF 或者只有一个库的 :sqlplus "用户名/密码"<<EOF ...
- C++11 lambda表达式学习
lambda表达式是函数式编程的基础.咱对于函数式编程也没有足够的理解,因此这里不敢胡言乱语,有兴趣的可以自己查找相关资料看下.这里只是介绍C++11中的lambda表达式自己的认识.这里有参考文档h ...
- Destoon标签使用技巧十则
Destoon标签 1.全局标签 网站名称:{$DT[sitename]}网站地址:{DT_PATH}网站LOGO: {if $MODULE[$moduleid][logo]}{DT_SKIN}ima ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- meta 属性
几乎所有的网页里,我们可以看到类似下面这段的html代码:<head><meta http-equiv="content-Type" content=" ...
- Linux 结束占用端口的程序
[root@ucit ~]# lsof -i:80COMMAND PID USER FD TYPE DEVICE SIZE NODE NAMEjava 1839 root ...
- js各种进制数之间的转换
计算机中常用的进制数有二进制.八进制.十进制.十六进制 一.十进制 to 其他 var x = 10; // 或定义其他值均可 x.toString(n); // n 代表要转换到的进制,比如n可以为 ...