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/ ...
随机推荐
- (转)javascript组件开发方式
作为一名前端工程师,写组件的能力至关重要.虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式. 下面我们来谈谈,在现有的知识体系下,如 ...
- sqlserver中的rowversion
rowversion 公开数据库中自动生成的唯一二进制数字的数据类型.rowversion通常用作给表行加版本戳的机制,存储大小为8字节.rowversion数据类型只是递增的数字,不保留日期或时间. ...
- HDU 5904 - LCIS (BestCoder Round #87)
HDU 5904 - LCIS [ DP ] BestCoder Round #87 题意: 给定两个序列,求它们的最长公共递增子序列的长度, 并且这个子序列的值是连续的 分析: 状态转移方程式 ...
- poj1083 贪心
K - 简单dp Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:10000KB 64bit ...
- c#鼠标在控件上面,然后显示文字
先添加toolTip控件到界面 然后每个控件的属性会多一项 ToolTip 第一种:直接给里面加文字 第二种: private void pictureBox_topmost_MouseHover(o ...
- Hadoop基本原理之一:MapReduce
1.为什么需要Hadoop 目前,一块硬盘容量约为1TB,读取速度约为100M/S,因此完成一块硬盘的读取需时约2.5小时(写入时间更长).若把数据放在同一硬盘上,且全部数据均需要同一个程序进行处理, ...
- python的and与or剖析
1.只含有and的表达式 In []: and True and ' Out[]: ' In []: and and True and 'long' Out[]: 从左向右,遇到False,则返回改值 ...
- BasicExcel说明文档
BasicExcel说明文档 BasicExcel原始链接:http://www.codeproject.com/Articles/13852/BasicExcel-A-Class-to-Read-a ...
- [Google Code Jam (Round 1A 2008) ] A. Minimum Scalar Product
Problem A. Minimum Scalar Product This contest is open for practice. You can try every problem as ...
- MyFirstStruts2
package com.sdlc.action; public class HelloWorldAction { private String msg; public void setMessage( ...