如何使用 CSS 和 jQuery 突出显示当前页面链接？

使用 CSS 区分当前页面链接

在网页设计领域，通常需要以不同于其他页面的方式突出显示与当前页面相对应的链接。这可以增强导航可见性并提供页面位置的清晰指示。

考虑以下示例：

<code class="html"><ul id="navigation">
  <li class="a"><a href="/">Home</a></li>
  <li class="b"><a href="theatre.php">Theatre</a></li>
  <li class="c"><a href="programming.php">Programming</a></li>
</ul></code>

要使用 CSS 实现所需的效果，我们可以将 定位为

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

;

中的元素容器：

<code class="javascript">$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});</code>

此代码对页面上的所有链接应用不同的颜色和悬停效果。但是，为了突出显示当前页面链接，我们可以使用 jQuery：

此脚本会迭代所有具有 href 属性的链接，并检查链接的 URL 是否与当前页面的 URL 匹配。如果是这样，它会向链接添加一个“活动”类，可以根据需要设置样式。

<code class="css">.active {
  color: #FFFFFF;
  background-color: #000000;
}</code>

以下 CSS 可用于设置活动链接的样式：

通过组合CSS 和 jQuery，您可以轻松地为当前页面链接创建视觉区分，增强用户体验和站点导航。

以上是如何使用 CSS 和 jQuery 突出显示当前页面链接？的详细内容。更多信息请关注PHP中文网其他相关文章！