- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站在其 URL 中使用哈希来通过 AJAX 进行导航 (which I got from this tutorial) 。单击链接时,/#/(链接名称)会添加到 url 末尾。
如果我在 mysite.com,点击“photos”,则 url 变为 mysite.com/#/photos,并且“#content”div 会使用来自/的 #content div 重新填充相片。
此外,如果由于某种原因,用户手动输入“mysite.com/photos”,然后单击“bio”,则其 URL 将显示为“mysite.com/photos/#/bio”
页面不会重新加载,并且 URl 与菜单 a 标记中的 href 不完全匹配,这一事实使我很难弄清楚如何将事件类添加到当前菜单项.
我的菜单是由wordpress生成的,看起来像这样
<div id="main-menu">
<ul>
<li><a href="mysite.com/photos">Photos</li>
etc.
</ul>
</div>
请帮忙!
最佳答案
我猜在 mysite.com/photos/#/bio
中您想将生物链接设置为事件吗?换句话说,就是网址的最后一个“单词”。
要实现此目的,您可以执行以下操作:
var path = window.location.pathname.split("\/"), myString;
if(path[path.length-1] === "")
myString = path[path.length-2];
else
myString = path[path.length-1];
myString = myString.toLowerCase()
console.log(myString);
存在 if/else 检查,因为如果路径名是“/hola/bandola/”,则分割后数组中的最后一个元素将是一个空字符串,但如果它只是“/hola/bandola”,则“bandola”将是最后一项。因此,为了使其能够以两种方式工作,检查是必要的。现在您有了带有正确字符串的变量,并且可以使用该信息将正确的链接设置为事件状态。
编辑:由于您不会动态生成导航链接,因此您必须将从我的代码中获得的值与每个导航链接的唯一值进行比较。我的建议是您在 a 标记中添加一个数据属性,该属性将与您从我的代码中获得的字符串相匹配。示例:<li><a href="mysite.com/photos" data-page="photos">Photos</li>
现在,您将遍历 UL 中的每个 a 标记,并将数据页值与从查询字符串中获取的值进行比较,如果匹配,则将类别设置为“active”:
var links = $("#main-menu").find("a");
$.each(links, function() {
if($(this).data("page") === myString)
$(this).addClass("active");
});
您可以只比较 a 标签中的文本,但如果文本与 url 字符串不匹配,则不起作用,因此最好添加数据属性。请注意,我编辑了上面的代码,以确保与数据属性进行比较时“myString”变量是小写的。希望您能理解。
编辑2:
要比较 a 标签内的文本,请使用此 every 循环:
var links = $("#main-menu").find("a");
$.each(links, function() {
if($(this).html("page").toLowerCase() === myString)
$(this).addClass("active");
});
关于jquery - 通过检测哈希(#)后的路径将 "active"类添加到当前菜单项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10079704/
我正在尝试 grep conf 文件中所有不以 开头的有效行 哈希(或) 任意数量的空格(0 个或多个)和一个散列 下面的正则表达式似乎不起作用。 grep ^[^[[:blank:]]*#] /op
我正在使用哈希通过 URL 发送 protected 电子邮件以激活帐户 Hash::make($data["email"]); 但是哈希结果是 %242y%2410%24xaiB/eO6knk8sL
我是 Perl 的新手,正在尝试从文本文件创建散列。我有一个代码外部的文本文件,旨在供其他人编辑。前提是他们应该熟悉 Perl 并且知道在哪里编辑。文本文件本质上包含几个散列的散列,具有正确的语法、缩
我一直在阅读 perl 文档,但我不太了解哈希。我正在尝试查找哈希键是否存在,如果存在,则比较其值。让我感到困惑的是,我的搜索结果表明您可以通过 if (exists $files{$key}) 找到
我遇到了数字对映射到其他数字对的问题。例如,(1,2)->(12,97)。有些对可能映射到多个其他对,所以我真正需要的是将一对映射到列表列表的能力,例如 (1,2)->((12,97),(4,1))。
我见过的所有 Mustache 文档和示例都展示了如何使用散列来填充模板。我有兴趣去另一个方向。 EG,如果我有这个: Hello {{name}} mustache 能否生成这个(伪代码): tag
我正在尝试使用此公式创建密码摘要以获取以下变量,但我的代码不匹配。不确定我做错了什么,但当我需要帮助时我会承认。希望有人在那里可以提供帮助。 文档中的公式:Base64(SHA1(NONCE + TI
我希望遍历我传递给定路径的这些数据结构(基本上是目录结构)。 目标是列出根/基本路径,然后列出所有子 path s 如果它们存在并且对于每个子 path存在,列出 file从那个子路径。 我知道这可能
我希望有一个包含对子函数的引用的散列,我可以在其中根据用户定义的变量调用这些函数,我将尝试给出我正在尝试做的事情的简化示例。 my %colors = ( vim => setup_vim()
我注意到,在使用 vim 将它们复制粘贴到文件中后尝试生成一些散列时,散列不是它应该的样子。打开和写出文件时相同。与 nano 的行为相同,所以一定有我遗漏的地方。 $ echo -n "foo"
数组和散列作为状态变量存在限制。从 Perl 5.10 开始,我们无法在列表上下文中初始化它们: 所以 state @array = qw(a b c); #Error! 为什么会这样?为什么这是不允
在端口 80 上使用 varnish 5.1 的多网站设置中,我不想缓存所有域。 这在 vcl_recv 中很容易完成。 if ( req.http.Host == "cache.this.domai
基本上,缓存破坏文件上的哈希不会更新。 class S3PipelineStorage(PipelineMixin, CachedFilesMixin, S3BotoStorage): pa
eclipse dart插件在“变量” View 中显示如下内容: 在“值”列中可见的“id”是什么意思? “id”是唯一的吗?在调试期间,如何确定两个实例是否相同?我是否需要在所有类中重写toStr
如何将Powershell中的命令行参数读入数组?就像是 myprogram -file file1 -file file2 -file file3 然后我有一个数组 [file1,file2,fil
我正尝试在 coldfusion 中为我们的安全支付网关创建哈希密码以接受交易。 很遗憾,支付网关拒绝接受我生成的哈希值。 表单发送交易的所有元素,并发送基于五个不同字段生成的哈希值。 在 PHP 中
例如,我有一个包含 5 个元素的哈希: my_hash = {a: 'qwe', b: 'zcx', c: 'dss', d: 'ccc', e: 'www' } 我的目标是每次循环哈希时都返回,但没
我在这里看到了令人作呕的类似问题,但没有一个能具体回答我自己的问题。 我正在尝试以编程方式创建哈希的哈希。我的问题代码如下: my %this_hash = (); if ($user_hash{$u
我正尝试在 coldfusion 中为我们的安全支付网关创建哈希密码以接受交易。 很遗憾,支付网关拒绝接受我生成的哈希值。 表单发送交易的所有元素,并发送基于五个不同字段生成的哈希值。 在 PHP 中
这个问题已经有答案了: Java - how to convert letters in a string to a number? (9 个回答) 已关闭 7 年前。 我需要一种简短的方法将字符串转
我是一名优秀的程序员,十分优秀!