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‘);
            }
	    }
    })

  

时间: 2024-08-07 17:00:10

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

利用Live属性,focus时重新绑定控件 $(".datepickerDom").live("focus", function () { $(this).datepicker({ dateFormat: "dd/mm/yy", changeMonth: true, changeYear: true }); });

Jquery给当前页或者跳转后页面的导航栏添加选中后样式

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript" src="templets/js/jquery.js"></script>  <script type=&qu

如何在导航栏添加hot样式图片

如何在导航栏添加hot样式图片:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在很多网站的导航栏中都有这样的效果,在一个比较热门的栏目上面会有一个动态的小图片用以标示此栏目比较热门或者是新增栏目等等,效果比较美观且人性化,下面就简单介绍一下如何实现此效果,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="autho

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

之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览   源码下载 一起看下实现的代码: html代码: <nav class="animated bounceInDown"> <ul> <li><a href="#profile"> <div class="fa

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(

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

本次实现栏目的浏览.添加.修改和删除. 栏目一共有三种类型. 常规栏目-可以添加子栏目,也可以添加内容模型.当不选择内容模型时,不能添加内容. 单页栏目-栏目只有一个页面,可以设置视图. 链接栏目-栏目为一个链接,点击后转到相应链接. 在视图中原本栏目的树形显示插件使用Bootstrap TreeView 1.2.0(MVC5 网站开发之六 管理员 2.添加.删除.重置密码.修改密码.列表浏览),后来使用中发现zTree使用起来更习惯,所以更换成zTree了. 目录 MVC5网站开发之一 总体概

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

使用HTML5、CSS3和jQuery增强网站用户体验[留存]

记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类似的用户体验.而且使用这些特性将会比使用flash更加有效.也许你可能刚知道Adobe停止开发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了.在今天这篇文章中,我们将介绍一些非常实用的教程,技巧和资源来帮助大家构建一