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


Posted in Javascript onDecember 08, 2016

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。

直接上代码:

第一种情况:

<script type="text/javascript" src="templets/js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".nav a").each(function(){ 
    $(this).click(function(){ 
      $(".nav .hover").removeClass("hover"); 
      $(this).addClass("hover");  
      return false;//防止页面跳转 
    }); 
  }); 
}); 
</script> 
  
<div class="nav"> 
<ul> 
  <li><a href="1.html" class="hover"> 首页</a></li> 
  <li><a href="2.html"> 个人资料</a></li> 
  <li><a href="3.html"> 我的好友</a></li> 
  <li><a href="4.html"> 消息管理</a></li>  
</ul>   
</div>

第二种情况:

<script type="text/javascript" src="templets/js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".nav a").each(function(){ 
    $this = $(this); 
    if($this[0].href==String(window.location)){ 
      $this.addClass("hover"); 
    } 
  }); 
}); 
</script> 
  
<div class="nav"> 
<ul> 
  <li><a href="1.html"> 首页</a></li> 
  <li><a href="2.html"> 个人资料</a></li> 
  <li><a href="3.html"> 我的好友</a></li> 
  <li><a href="4.html"> 消息管理</a></li>  
</ul>   
</div>

以上这篇Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
jquery二级目录选中当前页的css样式
Dec 08 #Javascript
wap手机端解决返回上一页的js实例
Dec 08 #Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 #Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 #Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 #Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 #Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 #Javascript
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
JS中style属性
2006/10/11 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python的log日志功能及设置方法
2019/07/11 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
在keras里实现自定义上采样层
2020/06/28 Python
python识别验证码的思路及解决方案
2020/09/13 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
PHP面试题附答案
2015/11/28 面试题
Ruby如何创建一个线程
2013/03/10 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
自我评价范文点评
2013/12/04 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
全陪导游欢迎词
2014/01/17 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
信用卡工作证明范本
2015/06/19 职场文书