Member Avatar for andrewliu

Hello

I have a question dealing with links and the page that the link is directed to.

So if i have

<a href="www.check.com/check.php">check</a>

And if I click on it and then i go to that page.

I would like the "check" link to be underlined. So I would like the link to be underlined only when it is on the page that its supposed to be directed. I'm not sure if its css or php or javascript?

Can someone direct me to the right direction?

Thank you

  • 2 Contributors
  • 2 Replies
  • 100 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by andrewliu

Dani AI

Generated

Brief recap: wants a link to appear underlined only when the user is on the page that link points to. 's idea of marking the current link in the HTML works, but it is manual. Two practical, less repetitive options are (1) mark the active item on the server while you render the page, or (2) detect the current URL in the browser and add a class or ARIA attribute automatically.

Client-side example (runs after DOM loads): it finds navigation anchors, normalizes their pathnames, and adds an is-active class plus aria-current="page" when a match is found.

document.addEventListener('DOMContentLoaded', function () {
  var links = document.querySelectorAll('nav a');
  var current = location.pathname.replace(/\/$/, '');
  links.forEach(function (link) {
    try {
      var lp = new URL(link.href, location.origin).pathname.replace(/\/$/, '');
      if (lp === current) {
        link.classList.add('is-active');
        link.setAttribute('aria-current', 'page');
      }
    } catch (e) { /* skip invalid hrefs */ }
  });
});

Style the active link in CSS (use either the class or the ARIA selector):

.is-active, [aria-current="page"] {
  text-decoration: underline;
  font-weight: 600;
}

Troubleshooting tips: compare normalized pathnames (strip trailing slashes, handle index filenames) so /, /index.html, and /folder/ are treated consistently. If your site uses server templates (PHP, Node, etc.), add the active class server-side for best performance and SEO. For details on the APIs used here see the MDN pages for the URL API and .

Recommended Answers

All 2 Replies

Member Avatar for drjohn

Create a style called #current and apply that to the link that refers to the page you are on. Style the link as appropriate - in your case text-decoration:underline;

#current {text-decoration:underline;}

<a id="current" href="thispage.htm">This Page</a>

You'd do this on each page of the site.

Member Avatar for andrewliu

then I have to go to all my pages and apply to id='current' to that specific link corresponding to that page? There's no other way? Like javascript or something?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.