Question

我正在为没有任何服务器端功能的网站创建菜单。因此，我在菜单中动态突出显示当前页面（以及其他更改）的唯一方法是检查当前URL并将其与当前文件的路径进行比较;当它们匹配时，我添加一类“当前”以及更改其他一些属性的值。

问题是我的正则表达式只匹配单个文件名的href值，而不匹配其他文件夹的相对路径。例如，如果我的菜单存储在“类别”文件夹中，href="page.html"将匹配“http://www.example.com/category/page.html”，但如果我使用href="../category/page.html"则不会不配。如果我在href中使用根相对路径，则会出现同样的问题。

我目前的正则表达式为/[^\/]+$/)[0]。这是整个脚本的样子：

$(document).ready( function () { 
  var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); 
  var currA = $("#nav-sub li a[href='" + pathname + "']"); 
  var treeParent = currA.closest(".tree-parent"); 
  treeParent.attr('aria-expanded', 'true'); 
  currA.parents("li").addClass("current");
  treeParent.children('a').first().attr('tabindex','0'); 
});

Answer 1

如果您在所有菜单超链接中使用了根相对路径，那么整个情况将更容易处理。然后你可以只比较window.location.pathname。

假设无法实现，您可以使用jq-uri库从javascript中获取根目录中的相对路径。它基本上是你正在寻找的正则表达式的库包装。

获取给定href的根相对路径将类似于：

var href = "../test";

var base_uri = new URI(window.location.href); 
var uri = new URI(href);
uri.resolve(base_uri).path;

要获得所需的功能，您可以：

循环浏览所有菜单锚标记
将上述代码应用于HREF以获取根相对路径
将计算出的路径与window.location.path
找到匹配项时应用“当前”课程和其他更改。

希望有所帮助。

正则表达式，用于匹配当前URL的href相对路径

1 个答案: