jQuery为当前栏目导航添加CSS样式

  在网站制作过程中,经常见到很多网站的导航栏中当前所在的栏目分类链接被添加了css样式,呈高亮状态,点击哪个分类链接哪个就会变成高亮状态,那么这种功能是怎么实现的呢,其实用jQuery就可以很轻松的实现。

  jquery代码:

/* 当前链接加css */
$('nav ul li a').each(function () {
	if ($(this)[0].href == String(window.location))
	$(this).parent().addClass('active');
});

  html代码:

<nav>
	<ul>
		<li><a id="5" title="环境类型" href="http://localhost/myyiqicms/allcategory.php">环境类型</a></li>
		<li><a id="6" title="所有产品" href="http://localhost/myyiqicms/allproduct.php">所有产品</a></li>
		<li><a id="2" title="公司历程" href="http://localhost/myyiqicms/article/about.html">公司历程</a></li>
		<li><a id="15" title="标准文献" href="http://localhost/myyiqicms/category.php?name=zl.html">标准文献</a></li>
		<li><a id="4" title="联系购买" href="http://localhost/myyiqicms/comment.php">联系购买</a></li>
	</ul>
</nav>

本站原创内容,如需转载请注明来源:https://www.liutonghui.com/127.html

上一篇 2015-09-05
下一篇 2015-12-09

评论列表(0条)

  • 暂时没有评论!

发表评论

captcha

相关推荐

  • 使用 jQuery 高亮显示当前栏目导航链接

      高亮显示当前栏目导航链接的原理是:先获取当前页面的 URL 或标识当前页面的导航链接,在文档加载时,使用 jQuery 添加一个特定的类或样式来高亮当前栏目导航链接。   以下是一个基本的示例,展示如何使用 jQuery 高亮显示当前栏目导航链接。在这个例子中,假设导航链接的 href 属性与当前页面的 URL 匹配。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;......

    2021-02-03
    13920
  • PHP数据分页实现原理

      数据分页是将大量数据分割成若干较小的页面,以提高用户体验和系统性能的技术。在PHP中,实现数据分页通常涉及以下步骤和原理:   查询总记录数:在进行分页之前,需要知道总共有多少条记录。通常使用 COUNT() 查询获取总记录数。   计算分页信息:根据总记录数、每页显示的记录数以及当前页码,计算出分页所需的信息,如总页数、当前页的起始记录索引等。   执行分页查询:根据分页信息,从数据库中获取相应页码的数据。   在页面上呈现数据:......

    2013-10-21
    9690
  • HTML5中article元素与section元素有什么区别

      在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。内容区块是指将HTML页面按逻辑分割后的单位。例如对于书籍来说,章、节可以称为内容区块;对于博客网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。   在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素......

    2014-10-27
    18710
  • PHP防止短时间内刷阅读量的方法

      防止短时间内刷阅读量是一个常见的需求,通常需要使用一些技术手段来检测和限制恶意访问。以下是一些可能的方法:   使用 Cookie 或 Session:   通过在用户访问时设置一个 Cookie 或 Session 记录,记录用户最后一次访问的时间戳。在下一次访问时,可以检查当前时间与上次访问的时间戳之间的差异,如果差异太小,则可能是刷阅读量的行为。 session_start(); $currentTime = time();......

    2021-05-06
    13870
  • ThinkPHP5使用laypage分页插件实现列表分页功能

      在使用thinkPHP框架做项目的时候,经常会遇到对列表的内容进行分页。thinkPHP框架中自带了分页功能,但是有缺陷。这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS、CSS等资源。如果页面包含的JS过多、过大,会增加流量压力。因此,我们使用laypage插件。每次使用ajax请求获取每页的数据就可以了,不需要重复加载页面。   分页流程   流程说明:   1) 调研App.php中的函数,该函数调用fetch函......

    2018-05-11
    21140
  • JavaScrpit中异步请求Ajax实现,多个Ajax请求数据交互

      在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。   一般来说,使用Jquery中的ReferenceError: katex is not defined.post,$.getJSON,非常方便,但是有的时候,我们只需要ajax功能,这样引入Jquery比较不划算。   所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数......

    2017-07-19
    9730
  • 刘翔退役:传奇职业生涯的终结

      2015年4月7日,刘翔宣布正式退役,结束了他在田径赛场上的辉煌生涯。他的退役引起了广泛的关注和尊重,体育界和粉丝们纷纷表示对他的感激之情。刘翔将始终被铭记为中国田径历史上的传奇人物,他的职业生涯不仅为国家争得荣誉,也为后辈运动员树立了榜样。   刘翔的退役是中国田径的一个重要时刻,他的职业生涯充满了荣誉和挫折。他的成就不仅体现在他的金牌和世界纪录上,还在于他对中国田径的影响和激励。刘翔不仅仅是一名优秀的运动员,更是一个榜样,他的......

    2015-04-09
    18090
  • 吊炸天的 PHP 7 ,你值得拥有

      2015年的夏天,虽然来得不算火热,但是在互联网技术的夏天,比任何一年都更为火热。   刚刚才结束了 5 月底的网易、支付宝、携程以及多家云存储厂商的接连故障的坏消息,6月上旬则迎来了编程语言界两大好消息,第一件是 Swift 2.0 发布以及开源,另一件是PHP 7 alpha版正式发布。这两件大事,都是可以载入相应的编程语言的史册级的事件。   Swift 2.0 的事,咱先不说了,本文的重点是带着大家见识一下鸟哥等众位大神......

    2015-06-25
    20692