Hello. I have a navigation menu:

<ul id="nav">
    <li><a href="home.php">Home</a></li>
    <li><a href="event.php">Events</a></li>
    <li><a href="#">Guest</a>
        <ul>
            <li><a href="add_guest.php">Add Guest</a></li>
            <li><a href="seating.php">Seating</a></li>
        </ul>
    </li> 
    <li><a href="rsvp.php">RSVP</a></li>
    <li><a href="contact_data.php">Contacts</a></li>
</ul>

how do i check which link is active? there are tons of this kinda questions and answers but i can't seem to make it work on my nav. from what i gathered, i know that window.location.pathname should be used and also the each function to check through the list. theres also split('/') -> window.location.pathname.split('/') but im not sure what that is for. the script is probably something along these lines:

$(document).ready(function(){
    $(#nav li a).each(function(){ //iterate through the list
        var url = window.location.pathname;//get the current url page
        //something here maybe if $(this) is the url then addClass('active'); 
    });
});

TIA!

Recommended Answers

All 2 Replies

you can try like this...

$(function() {
  var currentPath = window.location.pathname;
  $("a").each(function() {
     var src = $(this).attr("href");
     if (src.indexOf(currentPath) != -1) {
       $(this).css("font-weight", "bold");
     }
  });
});

i put the script on the page right? like if event.php then i put that script in event.php page? its not working. nothing happens after i refresh the page.

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.