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 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery实现计算器功能
Oct 19 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 设计模式之 单例模式
2008/12/19 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery实现跨域
2015/02/03 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
详解python:time模块用法
2019/03/25 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
单位未婚证明范本
2014/01/18 职场文书
《影子》教学反思
2014/02/21 职场文书
五年级学生评语
2014/04/22 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书