Jquery：动态改变<链接>的取决于路径名

Question

我们想要在链接上添加类，具体取决于window.location.pathname，

我们的html是：

  <nav>
    <a href="index.php">Home</a>
    <a href="company.php">Company</a>
    <a href="products.php">Products</a>
    <a href="technical.php">Technical</a>
    <a href="services.php">Services</a>
    <a href="contactus.php">Contact Us</a>
  </nav>

并且文档URL是www.nicadpower.com/index.php 因此，

var page_name = window.location.pathname.substring(1);

在获取/知道路径名为 'index.php' 后，我们希望 jquery 能够将 'page_name' 与 进行比较>href 以及如果它等于添加一个 class="current"

使我们的 html 代码像这样

  <nav>
    <a href="index.php" class="current">Home</a>
    <a href="company.php">Company</a>
    <a href="products.php">Products</a>
    <a href="technical.php">Technical</a>
    <a href="services.php">Services</a>
    <a href="contactus.php">Contact Us</a>
  </nav>

Answer 1

您可能根本不需要 JavaScript，请参阅最后的示例。

您正在寻找“属性等于选择器”，或者可能是“属性结尾为” 选择器 不，等于选择器有效：

// The equals selector
$('nav a[href="' + page_name + '"]').addClass('current');

// The ends-with selector
$('nav a[href$="' + page_name + '"]').addClass('current');

“属性等于选择器”是 CSS 2.1 并得到广泛支持，因此您可能根本不需要 JavaScript，只需使用样式表即可做到这一点。结尾选择器是 CSS3 并且可能不受支持，如果您需要支持旧版浏览器，当然不行。

这是一个使用 jQuery 和 CSS 的示例页面。使用“属性等于”选择器的 CSS 版本在 IE7 及更高版本、Firefox、Chrome、Opera 和 Safari 上运行良好。 （CSS 位在 IE6 上不起作用，这令人震惊。）

Answer 2

$("a[href='" + page_name + "']").addClass("current");

这将选择具有所需 href 属性值的 a 元素，并向其添加一个类。请参阅此处的小提琴示例。