How to Highlight Current Page Links with CSS and jQuery?

Distinguishing Current Page Links with CSS

In the realm of web design, it's often desirable to highlight links corresponding to the current page differently from others. This can enhance navigation visibility and provide a clear indication of the page's location.

Consider the following example:

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

To achieve the desired effect using CSS, we can target the <a> elements within the <li> containers:

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

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

This code applies a distinct color and hover effect to all links on the page. However, to highlight the current page link, we can employ jQuery:

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

This script iterates through all links with a href attribute and checks if the link's URL matches the current page's URL. If so, it adds an "active" class to the link, which can be styled as desired.

The following CSS could be used to style the active link:

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

By combining CSS and jQuery, you can effortlessly create a visual distinction for the current page link, enhancing the user experience and site navigation.

The above is the detailed content of How to Highlight Current Page Links with CSS and jQuery?. For more information, please follow other related articles on the PHP Chinese website!