提问者:小点点

基于URL模式突出显示目录中活动链接的CSS


我有一个包含一个UL元素的div,每个页面的目录都包含一个UL元素。

当前,我必须在active元素(class=“active”)上硬编码一个特殊的类。但是,我想看看是否可以使用CSS3通过将href与浏览器的当前URL匹配来完成这项工作。

例如,如果toc div的锚中的href与页面的当前URL匹配,则向其添加特殊格式。

示例URL:http://mysite.com/page-title/2

标记:

<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脚本中。


共1个答案

匿名用户

对于jQuery,以下内容应该起作用;

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

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