我有一个 div,其中包含 UL 元素以及我的每个页面的目录。
目前,我必须在事件元素上硬编码一个特殊类(class="active")。不过,我试图看看是否可以使用 CSS3 通过将 href 与浏览器的当前 URL 进行匹配来完成这项工作。
例如,如果目录 div anchor 中的 href 与页面的当前 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 脚本中。
最佳答案
对于 jQuery,类似下面的东西应该可以工作;
var urlString = window.location; // or try window.location.pathname
$('a[href="' + urlString + '"]').addClass("active");
关于jquery - CSS 根据 URL 模式突出显示目录中的事件链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14006764/