页面切换导航样式也随之改变

<ul  id="nav">
<li ><a href="index.html">首页</a></li>

<li ><a href="1.html">第一</a></li>

<li ><a href="2.html">第二</a></li>

<li ><a href="3.html">第三</a></li>
</ul>

<style>

  .active{color:#fff;background:#000;}

</style>

jquery

$("#nav a").each(function(){
  if($(this).attr(‘href‘)==String(window.location)){
    $(this).parent().addClass("active");
  }
});

时间: 2024-11-05 20:20:41

页面切换导航样式也随之改变的相关文章

jQuery和CSS3超酷3D页面切换导航菜单插件

这是一款效果非常酷的jQuery和CSS3 3D页面切换导航菜单特效插件.该导航菜单插件是汉堡包隐藏菜单,每个菜单项的图标使用SVG来制作,鼠标滑过图标时有动画效果,点击某一个菜单项后,页面会在3D空间进行切换,效果非常炫酷. 效果演示:http://www.htmleaf.com/Demo/201504111660.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201504111659.html

Jquery 第二课(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

2015-07-22 JQuery 第二课(JQ元素获取,添加,删除,判断,遍历,取值,样式设置,改变对象,切换)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

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

当鼠标选中页面导航栏的某一栏目后,如何给选中栏目添加特殊样式,一直没怎么搞清楚,今天学习了一下,并做个总结. 这边有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script>   $(document).ready(function(){       $(".nav a").each(function(){           $(this).click(func

Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换

上一篇博文我们介绍了利用ViewPager和Fragment实现顶部滑块左右滑动效果,具体参考(http://blog.csdn.net/a123demi/article/details/39480385). 而本篇博文将实例讲解利用ViewPager实现底部圆点导航左右滑动效果,以及被滑动界面实现监听事件,同时通过Fragment实现页面的切换. 对于该效果的实现,需要实现以下几个问题: 1. 底部圆点加载和实现方法? 2. 怎样实现左右滑动效果? 3. 被滑动页面,怎样实现监听事件? 4.

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

Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航

在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类App来说,Pivot更适合多个频道的展示,因为内容基本都是一样的. 到了Win10,微软模仿其他平台也推出了汉堡菜单,但并没有提供现成的控件,而是需要开发者通过一个名为SplitView的控件来实现.我个人并不觉得左上角的菜单有多么方便,汉堡菜单的使用必然会改变以前的导航模式,比如以前底部的AppBa