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>

，文档网址是 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，请参阅最后的示例。

您正在寻找"attribute equals selector"，~~或可能"attribute ends with"选择器~~ nope，等号选择器正常工作：

// 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，可能不太受支持，当然不需要支持旧浏览器。

Here's an example page同时使用jQuery和CSS。使用“属性等于”选择器的CSS版本在IE7及更高版本，Firefox，Chrome，Opera和Safari上运行良好。（CSS位在IE6上不起作用，quelle shock。）

Answer 2

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

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

Jquery：根据路径名</class>动态更改<link />的<class>

2 个答案: