Home/ Questions/Q 7650581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T11:17:14+00:00

I think i should use the window.location.pathname to get the url. and store in

  • 0

I think i should use the window.location.pathname to get the url. and store in a var called page_name

then i want to say, if the windows.location.pathname is in the url bar, then add active class to my

here is what i have so far. let me know what i need to change.

<div class="nav-collapse">
   <ul id="nav" class="nav">
   <li id="home"><a href="home_page.php">Home</a></li>
   <li id="watch"><a href="watch.php">Watch</a></li>    
   </ul>
 </div>

$(document).ready(function(){
var page_name = window.location.pathname.substring(1);
$('li[href$="' + page_name + '"]').addClass('active');
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you ask why your script doesn’t work, then I assume that your jquery selector is wrong. Try this:
    nav.js:

    $(function(){
    // get only the file name of the location pathname
    var page_name = window.location.pathname.split('/').pop();
    // now add 'active' class to the li element:
    $('a[href$="' + page_name + '"]').parent().addClass('active');
});

    common.css:

    .active {
background-color: red;
}

    {home_page, watch}.html:

    <!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="common.css">
        <title></title>
    </head>
    <body>
        <div class="nav-collapse">
            <ul id="nav" class="nav">
                <li id="home">
                    <a href="home_page.html">Home</a>
                </li>
                <li id="watch">
                    <a href="watch.html">Watch</a>
                </li>
            </ul>
        </div>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="nav.js" type="text/javascript"></script>
    </body>
</html>
    • 0