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
    14130
  • PHP数据分页实现原理

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

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

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

    2014-10-27
    19000
  • JavaScrpit中异步请求Ajax实现,多个Ajax请求数据交互

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

    2017-07-19
    10040
  • ThinkPHP5使用laypage分页插件实现列表分页功能

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

    2018-05-11
    21460
  • PHP防止短时间内刷阅读量的方法

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

    2021-05-06
    14090
  • CSS创建竖排文字的简单方法

      在制作网页的时候我们经常需要创建一些竖排的文字,或许这对你来说是一件很简单的事情,但是你是否想过用CSS可有N种创建竖排文字的方法?下面是由我翻译自Nettuts+的文章,希望这几种方法能够给你带来一些提示。   方法一:&lt;br /&gt;标签   一种可能的方法(但不推荐)是在每个字母后面添加&lt;br /&gt;标签来实现竖排文字: &lt;h1&gt; N &lt;br /&gt;E &lt;br /&gt;T ......

    2013-11-27
    14130
  • 成功申诉回所有QQ号

      我有五个QQ号,三个8位的,两个9位的,都设置了二代密保,并把密保信息截图存在移动硬盘里。今年7月移动硬盘突然不识别,后来没办法只好格式化重新分区,虽然移动硬盘修好了,但所有的文件全部丢失,也包括QQ密保。这里要说一句,这也使我对本来就无好感的三星更加失望。   由于密保不记得了,修改QQ密码也需要验证密保,存有很大的安全隐患和不便。有天突然发现弃用多年的一个9位号被人用手机登录了,这个号我多年不用了,密码早就忘了,但还记得以前设置......

    2013-12-14
    20311