使用 Jquery 在导航菜单中突出显示父链接

2023-12-05

我使用以下 Jquery 在导航中突出显示当前页面的链接。

// Add Active Class To Current Link
var url = window.location; // get current URL
$('#nav a[href="'+url+'"]').addClass('active');

我的导航如下所示:

<nav>
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">About Us<b class="caret"></b></a>
      <ul>
        <li><a href="">Sub Link 1</a></li>
        <li><a href="">Sub Link 2</a></li>
        <li><a href="">Sub Link 3</a></li>
      </ul>
    </li>
    <li><a href="">Products</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

导航有一个“关于我们”部分的子导航。

我想让“关于我们”链接接收“活动”类,以便当我位于其子导航页面之一时它保持突出显示。

例如,如果我在“子链接 2”页面上,则“关于我们”链接将被赋予一个活动类。

有人能在这里指出正确的方向吗?

感谢您的帮助


尝试下面的代码,

// Add Active Class To Current Link
var url = window.location; // get current URL
$('#nav a[href="'+url+'"]').addClass('active');

var $activeUL = $('.active').closest('ul');
/*
Revise below condition that tests if .active is a submenu
*/
if($activeUL.attr('id') != 'nav') { //check if it is submenu
    $activeUL
        .parent() //This should return the li
        .children('a') //The childrens are <a> and <ul>
        .addClass('active'); //add class active to the a    
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Jquery 在导航菜单中突出显示父链接 的相关文章

  • dataTables fnFilter 列 on img 文件名

    我正在尝试根据标签的 src 属性中的图像文件名来过滤列 我的行看起来像这样 tr class unread odd td class td tr
  • Disqus:使用 jQuery 成功后更改标题

    Disqus 根据请求自动放置定义的标题 例如 添加新评论 我尝试在ready 上使用jquery更改它的值 dsq new post h3 text Paticipa con tu cuenta favorita 没有成功 我如何知道 d
  • xhr 响应 for 循环不起作用

    我有 xhr 和 for 循环 它的工作非常罕见 for var i 0 i lt this files length i var xhr new XMLHttpRequest xhr upload onprogress function
  • 如何使用 jQuery 显示“忙”指示器?

    如何在网页中的特定点显示旋转的 忙 指示器 我想在 Ajax 请求开始 完成时启动 停止指示器 这真的只是显示 隐藏 gif 动画的问题 还是有更优雅的解决方案 您可以只显示 隐藏 gif 但您也可以将其嵌入到 ajaxSetup 中 以便
  • jquery ajax仅从另一页获取一个div块

    我有一个成功的ajax请求 可以下载整个html内容 现在我只需要获取一个包含id data today 的div标签 如何编写这样的脚本 看看这个 SOq 在 jQuery 中提取 Ajax 返回数据 https stackoverflo
  • 如何在不接受焦点的元素上捕获键盘事件?

    我知道要处理输入字段中的键盘事件 您可以使用 input keyup function e var code e keyCode and 13 is the keyCode for Enter 但是 现在 我有一些div and li元素
  • 如何恢复文本框数据

    我有一个小小的要求 我们已经恢复了之前清除的文本框数据 下面是我的 HTML 代码 table tr td td tr table
  • 如何使用多个 select2 框过滤表格?

    我正在尝试使用 和多个 select2 框的类来过滤表格 表格 HTML table class table tbody tr class kanban event Austin td td tr tr class csm event Ch
  • Internet Explorer 中的 AJAX 问题

    这在 FF safari chrome 和 opera 中工作得很好 但在 IE 中却不行 错误代码是403 var datau trends php 3Frastgele 3D33 ajax type GET url loader php
  • jQuery:查找具有特定自定义属性的元素

    我只想找到具有特定自定义属性值的元素 例如 我想找一个div其具有属性data divNumber 6 var number 6 var myDiv data divNumber number 我尝试使用http api jquery co
  • jQuery 日期格式

    如何使用 jQuery 设置日期格式 我正在使用下面的代码但出现错误 txtDate val format date new Date dd M yy 请提出解决方案 在您的页面中添加 jquery ui 插件 txtDate val da
  • 试图隐藏选择列表中的选项..不适用于 chrome 和 ie

    我有一个选择列表 其中有很多选项 根据某些输入 我想从选择列表中隐藏一些选项 为了隐藏选择列表中的选项 我编写了jquery 例如 selectlist1 option each function this hide 但这段代码似乎只适用于
  • 取消选择所有复选框后,客户端过滤器显示所有项目

    加载时 复选框将取消选中 并显示所有列表项 当选中过滤器时 将显示相关的列表项 我遇到的问题是 当您再次取消选中所有复选框时 我需要显示所有项目而不是隐藏 这是我的小提琴 http jsfiddle net amesy B9Hnu 124
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • jquery 中的函数返回未定义[重复]

    这个问题在这里已经有答案了 我在 jquery 中调用的函数返回未定义 我检查了该函数 当我对其进行调试时 它返回正确的数据 function addToPlaylist component type add to pl value pl
  • jQuery:将文本区域滚动到给定位置

    我有一个包含很多文本的文本区域
  • .removeClass 从所有元素(相对于单个定义的元素)

    我将如何使用 removeClass 删除所有匹配的类 而不是单独调用每个元素 所以代替这个 input removeClass CO form alert select removeClass CO form alert input se
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子
  • 将网站加载到 DIV 中

    当我在文本框中写入 URL 然后单击提交按钮时 如何实际从网站检索数据 我希望将数据放入我拥有的 div 中 这可能吗 我已经尝试过这个 但它不起作用

随机推荐

  • 以编程方式清除 IE 缓存与 InetCpl.cpl,ClearMyTracksByProcess

    我有一个托管网络浏览器控件的应用程序 它使用我的微软提供的代码示例 定期 清除缓存 http support microsoft com kb 262110 然而 我注意到 一段时间后 缓存会损坏或无法正常工作 应该超出缓存的请求 会被一遍
  • 如何获取用于调用 google api 的委托凭证对象?

    我正在尝试通过 API 获取 gsuite 警报 我已经按照他们的要求创建了一个服务帐户docs我已将该服务帐户分配给我的谷歌云功能 我不想使用环境变量或上传凭据以及源代码 但我想利用函数使用的默认服务帐户 from googleapicl
  • 修复跨线程异常

    我需要一些帮助来修复跨线程异常 我使用 Invoke 通常可以解决这个问题 但由于某种原因它不起作用 void paintTimer Elapsed object sender System Timers ElapsedEventArgs
  • 如何计算python中数组中的值与数组之和的比率? [复制]

    这个问题在这里已经有答案了 我有一个这样的数组 array 1 2 3 5 3 4 6 7 2 对于每个成员 我想计算它们与行总和的比率 因此 我在建议样本中的问题的结果是 result 1 1 2 3 2 1 2 3 3 1 2 3 5
  • iOS 逐帧视频向前/向后播放

    我想在 iOS 设备上以慢动作播放视频 我的视图包含一个视频 约 2 秒长 和一个滑块 用户可以移动滑块并逐帧 向前和向后 浏览电影 MPMoviePlayerController缺乏逐帧步进的能力 我读到MVAssetReader 但我不
  • 绑定 int64 (SQL_BIGINT) 作为查询参数会导致在 Oracle 10g ODBC 中执行期间出错

    我在 Oracle 10g 上使用 ODBC 3 0 插入表失败 我不知道为什么 数据库运行在Windows Server 2003上 客户端运行在Windows XP上 桌子 CREATE TABLE test testcol NUMBE
  • Flutter:预定的通知日期时间

    我正在寻找将 Flutter 的插件 date time picker 与本地通知集成 因此 当我选择日期时间时 我还会安排通知 这是我的代码 你能帮我吗 现在我没有任何错误 但代码不起作用 class test1 extends Stat
  • 如何规范工作目录中的行结尾

    我的 git 存储库中有以 LF 结尾的文件 不知何故 我的工作树中的一些文件被转换为 CRLF 有没有办法将我的工作树中的行结尾转换回 LF 请注意 我的目录中有一些文件 gitignore所以我不想简单地删除所有内容并再次检查 尽管如果
  • 在 mac 雪豹上启用 php [关闭]

    Closed 这个问题是无关 目前不接受答案 安装 Entropy PHP 5 3 03 pkg 我一直在尝试在我的 mac 上启用 php 但每次我将浏览器指向 test php 时 我得到的只是显示的源代码 我将 test php 放在
  • Bash 脚本 - Do-While 循环中的变量作用域

    我有一个 do while 循环 我在其中向自身添加一个变量 while read line do let variable variable someOtherVariable done return variable 当我回显 vari
  • 使用 C# .accdb 文件的 Microsoft Access 压缩和修复

    我需要使用 C 压缩并修复 accdb 最后一个 MS Access 版本 我尝试使用这个 var jroEngine new JRO JetEngineClass var old Provider Microsoft ACE OLEDB
  • 用 rpy 制作的图发送到 X11 突然关闭?

    我正在使用 RPy2 来绘制一些图 绘图显示 但 X11 窗口立即消失 我输入的内容如下CCFS是一个数据矩阵 import rpy2 robjects as robjects r robjects r pca r princomp CCF
  • 将 mongo ObjectId 转换为字符串并将其用于 URL 可以吗?

    document show id 4cf8ce8a8aad6957ff00005b 一般来说 我认为您应该谨慎向客户端公开内部结构 例如数据库 ID URL 很容易被操纵 并且用户可能访问您不希望他访问的对象 特别是对于 MongoDB 对
  • SQL Server:如何获取排它锁以防止竞争条件?

    我有以下 T SQL 代码 SET TRANSACTION ISOLATION LEVEL SERIALIZABLE BEGIN TRANSACTION T1 Test This is a dummy table used for lock
  • PHP 多个复选框删除

    我很难解决删除多个复选框的问题 有人可以指导我找到解决方案吗 这里应该发生的是 用户可以勾选复选框并单击删除按钮来删除勾选的框 不幸的是 我的代码似乎不起作用 你能为我指出正确的方向吗 div class page img class pa
  • 为什么必须声明 Typescript 的环境接口实现?

    我有一些接口及其实现的定义 每个实现类都必须声明许多方法 我发现它乏味且多余 因为它只是一个定义 是否只是缺乏时间来实现此功能 或者为什么应该强制执行环境实现定义背后的某些想法 或者我错过了什么 UPDATE 我现在不喜欢我的问题 它是从一
  • 这是批处理文件注入吗?

    C gt batinjection OFF DEL c c batinjection bat 的内容为ECHO 我听说过 SQL 注入 虽然我从未真正做过 但这就是注入吗 有不同类型的注射吗 这是其中之一吗 或者还有另一个技术术语吗 或者更
  • 如何覆盖 AWS-SDK-CPP 中的端点以连接到 localhost:9000 处的 minio 服务器

    我尝试过类似的东西 Aws Client ClientConfiguration config config endpointOverride Aws String localhost 9000 这是行不通的 看来AWS SDK CPP默认
  • Pyspark 按另一个数据帧的列过滤数据帧

    不知道为什么我在这方面遇到困难 考虑到在 R 或 pandas 中相当容易做到 它看起来很简单 我想避免使用 pandas 因为我正在处理大量数据 而且我相信toPandas 将所有数据加载到 pyspark 中的驱动程序内存中 我有 2
  • 使用 Jquery 在导航菜单中突出显示父链接

    我使用以下 Jquery 在导航中突出显示当前页面的链接 Add Active Class To Current Link var url window location get current URL nav a href url add