Question

我有一个div，其中包含每个页面目录的UL元素。

目前，我不得不对活动元素（class =“active”）上的特殊类进行硬编码。但是，我正在尝试通过将href与浏览器的当前URL相匹配来使用CSS3来完成工作。

例如，如果toc div的锚点中的href与页面的当前URL匹配，请为其添加特殊格式。

标记：

<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/page-title/">Part 1</a></li>
        <li><a href="http://mysite.com/page-title/2">Part 2</a></li>
        <li><a href="http://mysite.com/page-title/3">Part 3</a></li>
    </ul>
</div>

在上面的示例中，我想将特殊的css格式应用于第二个列表项元素，因为它的HREF模式与URL模式匹配“/ 2”。

如果这不能通过CSS实现，我可以将它放在我的jQuery脚本中，如果你可以提供jQuery代码。

Answer 1

使用jQuery之类的东西应该可以工作;

var urlString = window.location; // or try window.location.pathname

$('a[href="' + urlString + '"]').addClass("active");

Answer 2

这里不需要JavaScript。只需在与当前页面对应的body标记中添加一个类，然后将该类添加到导航项中。然后为匹配的集创建一个css规则，如下所示：

<body class="products">
<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/page-title/" class="products-nav">Product Overview</a></li>
        <li><a href="http://mysite.com/page-title/2" class="home-nav">A More Dynamic Home Page</a></li>
        <li><a href="http://mysite.com/page-title/3" class="images-nav">Featured Images on Steroids</a></li>
    </ul>
</div>

和

<body class="home">
<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/page-title/" class="products-nav">Product Overview</a></li>
        <li><a href="http://mysite.com/page-title/2" class="home-nav">A More Dynamic Home Page</a></li>
        <li><a href="http://mysite.com/page-title/3" class="images-nav">Featured Images on Steroids</a></li>
    </ul>
</div>

等。然后：

.products .products-nav, .home .home-nav, .images .images-nav {
    font-weight: bold;
}

CSS基于URL模式突出显示内容列表中的活动链接

2 个答案: