Member Avatar for nadiam

hey guys so im kinda stumped. i have a menu bar

|home|events|contacts|

for example if im on the home page i would like the |home| to be active or to show that i am on the home page. ive tried :visited and i even tried jquery and it doesnt work for me. i dunno, maybe im not doing it right or smtg.

<div class="top-menu-content">
    <ul class="top-menu-button">
        <li class="top"><a class="top-button" href="home.php">Home</a></li>
        <li class="top"><a class="top-button" href="event.php">Events</a></li>
        <li class="top"><a class="top-button" href="contact_data.php">Contacts</a></li>
    </ul>
</div>

jquery that i tried:

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

css:

.top-menu-content{width:100%;}
.top-menu-button{list-style-type:none;overflow:hidden;}
.top{float:left;}
.top-button{height:22px;font-family:Arial;display:block;width:200px;font-weight:bold;background-color:DeepSkyBlue;color:white;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;}
.top-button:hover{background-color:DodgerBlue}

thanks in advance!

  • 2 Contributors
  • 2 Replies
  • 383 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by nadiam

Dani AI

Generated

Useful, practical fix and why was on the right track

The simplest reliable approach is to add an active class to the correct anchor (server-side if possible, client-side otherwise) and style that class in CSS. Comparing raw attribute text to window.location.href often fails because links and the current URL can differ in form (relative vs resolved absolute, trailing slash, query string, index filename, hash, etc.). Normalize the values before comparing so small differences don’t break the match.

Client-side example — resolve and compare pathnames (handles relative links and strips trailing slashes/query/hash):

<script>
(function(){
  var current = location.pathname.replace(/\/$/, "");
  document.querySelectorAll('.top a').forEach(function(a){
    var resolved = new URL(a.getAttribute('href'), location.origin)
                       .pathname.replace(/\/$/, "");
    if (resolved === current) a.classList.add('active');
  });
})();
</script>

Server-side is even cleaner when you can: render the active class while building the menu so there’s no JS dependency. For example, in PHP compare the current script name and output class="active" on the matching list item.

Style the active class and test in devtools

.top-button.active { background-color:#005fb3; color:#fff; }

Quick debugging tips: log a.getAttribute('href'), a.href, location.href, and location.pathname in the console to see exactly what differs. Also decide whether you want exact-page matches (compare pathnames) or section matches (use startsWith or check the filename only) to handle query strings or index pages. This covers the common failure modes that break the simple equality check.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

The problem with if (this.href == window.location.href) is that this.href only contains home.php while window.location.href contains the full URL.

Member Avatar for nadiam

oh, then how would i make it for all the href?

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.