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/ ...
随机推荐
- Linux 下安装oracle数据库
原文出处 http://www.linuxidc.com/Linux/2015-02/113222.html 需要安装Oracle DataGuard,所以先要安装单台Oracle11g, ...
- Jquery常用方法(转)
原文:http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html jQuery是目前使用最广泛的javascript函数库.据 ...
- android单选按钮选择,RadioGroup,radioButton
android单选按钮选择,RadioGroup,radioButton 14. 四 / android基础 / 没有评论 单选布局绑定 如何识别选择
- 清除大文本中的html标签
public String clearHtmlText(String inputString) { if (StringUtils.isBlank(inputString)) { return &qu ...
- 微信JS-SDK 接口调用与 php 遇到的坑
问题:config:invalid signature一直爆这个错误 解决: 看我把这些坑都总结了一下:要命的invalid signature. https://segmentfault.com/q ...
- mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in
从字面的意思上说:这个函数要被弃用,请使用 mysqlli 或者是 PDO 代替 然后就查手册发现没说,大家一定要查官方最新的手册
- FMDB官方使用文档-GCD的使用-提高性能(翻译)
FMDB官方使用文档-GCD的使用-提高性能(翻译) 发布于:2013-08-19 10:01阅读数:13395 由于FMDB是建立在SQLite的之上的,所以你至少也该把这篇文章从头到尾读一遍.与此 ...
- [HDU] 2094 产生冠军(拓扑排序+map)
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=2094 注意每组数据处理前,map要清空. #include<cstdio> #includ ...
- ubuntu 执行apt-get update 提示无法获得锁
问题如下: y@y:~$ sudo apt-get updateE: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)E: 无法对目录 /var/l ...
- 采购术语PR、PO、RFQ、RFI、SOW、BOM、JIT、VMI、MRO 是什么意思
PO:Purchase Order Form 采购订单,公司对外使用,还有个PR: ,公司内部使用的采购申请单 PR (Purchase Requirent) 请购单,采购申请单,代表企业内部的申请需 ...