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

看完三本东野圭吾的书
上一篇 2015-10-16
Ajax实现无刷新表格实时编辑
下一篇 2016-02-20

评论列表(0条)

  • 暂无评论

发表评论

captcha

相关推荐

  • PHP动态滚屏无刷新加载数据

      滚屏加载,也称为滚动加载或懒加载,是一种网页设计技术,当用户滚动页面时,新内容会自动加载,无需点击&ldquo;下一页&rdquo;按钮。这种技术提高了用户体验,尤其是在处理大量数据时,如社交媒体、新闻网站和电子商务平台。   滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个......

    2013-10-24
    22230
  • 基于jQuery+JSON的省市区三级无刷新联动

      省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统、电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动。本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。   HTML   首先在head中载入jquery库和cityselect插件。 &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/sc......

    2013-12-09
    17480
  • jQuery制作图片浮动放大,鼠标滚轮缩放功能

      点击图片居中放大显示,背景半透明遮罩,鼠标滚轮可缩放图片大小,再次点击图片恢复原始大小并关闭。 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片点击放大居中+滚轮缩放&lt;/title&gt; &lt;script src="https://code.jqu......

    2014-08-10
    17270
  • jQuery实现文章列表指定行后插入广告

      jQuery插入广告位功能:可指定固定位置,第几行后插入广告和随机某一行后插入广告,每次刷新位置不一样两种模式。 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文章列表插入广告&lt;/title&gt; &lt;script src="https://code......

    2014-09-12
    12250
  • jQuery Ajax无刷新数据增删改查功能

      一套简单的无刷新数据增删改查功能,基于jQuery Ajax异步请求技术,后端使用PHP处理数据并返回结果给前端,实现页面无刷新,不跳转对数据增删改查操作。   index.html &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AJAX 无刷新增删改查&lt;/t......

    2014-11-16
    20100
  • jQuery实现文件列表和缩略图模式切换

      做一个简单的仿网盘前端页面,实现文件以列表模式和缩略图模式切换功能。 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表/缩略图模式切换&lt;/title&gt; &lt;script src="https://code.jquery.com/jquery-1......

    2015-03-09
    17250
  • Layui + jQuery无刷新增删改查功能

      使用Layui框架可以让后台管理功能开发更高效,UI风格更统一美观。简单介绍一下Layui+jQuery开发无刷新数据操作功能的原理,支持数据查询,增加,修改,删除(包括批量删除)。   index.html &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Layui......

    2018-09-14
    19930
  • 使用 jQuery 高亮显示当前栏目导航链接

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

    2021-02-03
    17890