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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
js实现烟花特效
2020/03/02 Javascript
Python实现求数列和的方法示例
2018/01/12 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
承诺书怎么写
2014/03/26 职场文书
十八大演讲稿
2014/05/22 职场文书
投资意向书
2014/07/30 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
个人年终总结范文
2015/03/09 职场文书
爱国主义主题班会
2015/08/14 职场文书
企业法人任命书
2015/09/21 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS