jQuery实现的导航条点击后高亮显示功能示例


Posted in jQuery onMarch 04, 2019

本文实例讲述了jQuery实现的导航条点击后高亮显示功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery导航条点击后高亮显示</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    #nav li {float: left; width: 80px; text-align: center; list-style-type: none;}
    .nav-active {background: #ff47a5;}
    .nav-active a {color: #fff;text- decoration:none}
  </style>
</head>
<body>
<ul id="nav">
  <li class="nav-active"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Page1</a></li>
  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Page2</a></li>
  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Page3</a></li>
  <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Page4</a></li>
</ul>
 <script>
 $('#nav').find('li').click(function() {
 // 为当前点击的导航加上高亮,其余的移除高亮
 $(this).addClass('nav-active').siblings('li').removeClass('nav-active');
 });
 </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,运行效果如下:

jQuery实现的导航条点击后高亮显示功能示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用 jQuery 实现表单验证功能
Jul 05 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
jQuery.parseJSON()函数详解
Feb 28 #jQuery
jQuery each和js forEach用法比较
Feb 27 #jQuery
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 #jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
You might like
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
Python 里最强的地图绘制神器
2021/03/01 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
小学生寒假家长评语
2014/04/16 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
给老婆的保证书
2015/01/16 职场文书
工作简历的自我评价
2019/05/16 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python