导航高亮

http://www.cnblogs.com/Dtscal/p/acv.html

if(nowUrl == ctx+"/center/personal/index.xhtml" || nowUrl == ctx+"/center/school/index.xhtml" || nowUrl == ctx+"/center/company/index.xhtml" ){
				//首页高亮
				$("#indexMenu").addClass("hover1");
			}else{
				$("a").each(function(){
					var getUrl = $(this).attr("href");
					if(getUrl == nowUrl ){
						var menuId= $(this).attr("data-fatherId");
						if(menuId){
							$("#"+menuId).addClass("hover1");
							return false;
						}

					}
				})
			}
var urlstr = location.href;    //获取浏览器的url
 var urlstatus=false;        //标记
 //遍历导航div
 $("#menu a").each(function () {
//判断导航里面的rel和url地址是否相等
  if ((urlstr + ‘/‘).indexOf($(this).attr(‘rel‘)) > -1&&$(this).attr(‘rel‘)!=‘‘) {
   $(this).addClass(‘cur‘); urlstatus = true;
  } else {
   $(this).removeClass(‘cur‘);
  }
 });
//当前样式保持
 if (!urlstatus) {$("#menu a").eq(0).addClass(‘cur‘); }

明天来完善

				
时间: 2024-10-26 17:52:03

导航高亮的相关文章

在项目中运用到的导航高亮

不废话,直接贴代码,毕竟是简单的导航高亮,几乎所有人都能看懂 (function($, w, d) { function nav(name, className) { var url = window.location.pathname + window.location.search; //获取URL路径地址与URL Get传参之后的地址 var v1 = ""; if (url.indexOf("About/media") != -1) {//判断URL中是否存

JS原生代码实现导航高亮

一 实现原理 根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联,并对相应的导航设置高亮样式. 二 代码解析 先简单写一个页面顶端的导航栏:<nav>  <ul>    <li><a class="nav active" href="#nav1">导航1</a></li>    <li><a class="nav" href="#na

thinkcmf 导航高亮制作方法(适用于多级导航)(通用)

平时用thinkcmf网站开发经常需要导航点击之后高亮,就写了一些实现方法分享一下. 思路很简单,先获取当前页面的顶级栏目的地址,然后与导航中的地址比较,相同的就加上一个class,把下面函数理解了不管一级.二级.三级都能做. 1.添加函数 /*获取当前栏目的顶级栏目地址适用2级栏目*/ function get_top_url($c,$id){ $arr['href']['action']="Portal/".$c."/index"; $arr['href']['

高亮效果,比如导航高亮

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Microsoft YaHei"; color: #2eafa9 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Microsoft YaHei"; color: #060606 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px &quo

左侧高亮(js)

//左导航高亮 (function(){ var leftnav = $('#leftnav');  //左侧ul var pi = __preset.curpathid; if(pi=='/account') pi += '/index'; if(pi.match(/(\/[a-z]+){3}/)){ var a = pi.split('/'); pi = '/'+a[1]+'/'+a[2]; } var curnav = leftnav.find('li a[href="'+pi+'&quo

H5页面导航跟随页面滚动而联动

项目开发过程中遇到一个主页,实现功能: 需要页面在滚动到导航时导航吸顶: 导航随页面滚动高亮选中:点击导航页面滚动到固定位置: 在导航项过多时导航横向滚动: 最后一个面板底部补白且兼容iphoneX. 页面区域划分: 头部数字显示(在页面上拉后隐藏) 导航部分 面板部分(所有的面板放在一个大div里) 效果如下图:           一:页面在滚动到导航时导航吸顶(sticky粘性布局) <!--头部数字--><div class="head-number">

Effective前端1:能使用html/css解决的问题就不要使用JS

  借用Effective之名,开始写Effective系列,总结一些前端的心得. 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 在正常态时,每个导航的默认样式为: 正常态透明度为0.5 CSS 1 2 3 n

【vue】饿了么项目实战笔记

1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分. <meta name="viewport" content="width=device-width,inital-scale=1.0, maximum-s

能用HTML/CSS解决的问题就不要使用JS!

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 在正常态时,每个导航的默认样式为: nav li{    opacity: 0.5;} 当前页面的导航透明度为1. 为了实现这个目的: 首先通过body给不同的页面