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加密密码到cookie的实现代码
Apr 18 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jquery实现广告上下滚动效果
Mar 04 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
更改localhost为其他名字的方法
2014/02/10 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript之文件操作
2007/03/07 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python 动态调用函数实例解析
2019/10/21 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python如何用filter函数筛选数据
2020/03/05 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
项目委托协议书(最新)
2014/09/13 职场文书
公司员工奖惩制度
2015/08/04 职场文书
编写python程序的90条建议
2021/04/14 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android