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 21 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jquery默认校验规则整理
Mar 24 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
AM/FM收音机的安装与调试
2021/03/02 无线电
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
理解JavaScript中的事件
2006/09/23 Javascript
取得传值的函数
2006/10/27 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python flask框架post接口调用示例
2019/07/03 Python
Pytorch的mean和std调查实例
2020/01/02 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
自我评价是什么
2014/01/04 职场文书
幼儿园运动会口号
2014/06/07 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
明确岗位职责
2015/02/14 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
乒乓球比赛通知
2015/04/27 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
使用springMVC所需要的pom配置
2021/09/15 Java/Android