0

我们想根据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>
4

2 回答 2

4

您可能根本不需要 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 上不起作用，平息震惊。）

于 2011-06-18T08:23:58.763 回答
3 
$("a[href='" + page_name + "']").addClass("current");

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

于 2011-06-18T08:25:01.827 回答