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

更新时间：2019年03月04日 09:36:35 作者：致Great

这篇文章主要介绍了jQuery实现的导航条点击后高亮显示功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试上述代码，运行效果如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

jQuery自制提示框tooltip改进版
这篇文章主要介绍了jQuery自制提示框tooltip改进版，将tooltip内容加上图片预览，感兴趣的小伙伴们可以参考一下
2016-08-08
JQuery样式与属性设置方法分析
这篇文章主要介绍了JQuery样式与属性设置方法,结合实例形式分析了jQuery属性的获取与设置、以及样式的添加与删除相关操作技巧,需要的朋友可以参考下
2019-12-12
jQuery+css+html实现页面遮罩弹出框
面遮罩弹出框已经不是一个陌生的话题了，实现的方法大同小异多种多样，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,感兴趣的朋友可以参考下哈
2013-03-03
jQuery表格行换色的三种实现方法
一般情况下使用第二种方法是可以的，但是遇到表格行可以拖拽的情况，那么就会出现BUG了，这个自行测试就知道了。
2011-06-06
jQuery live
jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。
2009-05-05
jQuery获取当前点击的对象元素(实现代码)
下面小编就为大家带来一篇jQuery获取当前点击的对象元素(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
使用jQuery可以更加容易地遍历DOM的父级、子级和同级元素,这里我们就来举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历:
2016-07-07
jquery表单插件Autotab使用方法详解
这篇文章主要为大家详细介绍了jquery表单插件Autotab使用方法，Autotab自动Tab文本框，感兴趣的小伙伴们可以参考一下
2016-06-06
超级简单的jquery操作表格方法
这篇文章主要介绍了超级简单的jquery操作表格方法,可实现针对表格行与列的增加及删除操作,是非常实用的技巧,需要的朋友可以参考下
2014-12-12
jquery实现网站列表切换效果的2种方法
这篇文章主要为大家详细介绍了jquery实现网站列表切换效果的2种方法，供大家参考，感兴趣的小伙伴们可以参考一下
2016-08-08