menu onclick function not being seen

Question

I'm trying to change the menu button colour based on which page of the site the person clicks on. The function onclick isn't being called at all when I click on the menu links (I've tried a console.log()). I'm using a header.php file to load the header into each page so I can't change the class based on which page is loaded through just html. I'm using jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

In the header.php file:

       <nav id = "menu">
            <ul class="nav">
                <li><a class="toggle-colour" href = "index.php">Home</a></li>
                <li><a class="toggle-colour" href = "work.php">Work</a></li>
                <li><a class="toggle-colour" href = "clients.php">Clients</a></li>
                <li><a class="toggle-colour" href = "contact.php">Contact</a></li>

            </ul>
        </nav>

JS:

 $(document).ready(function() {

  $('.nav li a').on('click', function() {
      $(this).toggleClass("selected");  
    });
});

css

 a { color: #fff; }
a.selected {
        color: #444;
    }

Answer 1

In the header php file, why don't you do check the page and then apply the class?

<nav id = "menu">
            <ul class="nav">
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/index.php"){ echo "selected"; } ?>" href = "index.php">Home</a></li>
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/work.php"){ echo "selected"; } ?>" href = "work.php">Work</a></li>
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/clients.php"){ echo "selected"; } ?>" href = "clients.php">Clients</a></li>
                <li><a class="toggle-colour <? if($_SERVER['PHP_SELF'] == "/contact.php"){ echo "selected"; } ?>" href = "contact.php">Contact</a></li>

            </ul>
    </nav>

... so as the others point out, when you change pages the javascript code does not follow. If you want to highlight the page they are on when they change you can do something like the above. The above checks the page and applies the class if they are on that page.

Answer 2

Try the below code,

Your code won't work since it's redirecting to another page

 $(document).ready(function() { $('.nav li a').on('click', function() { $(this).toggleClass("selected"); return false; }); }); 

 a { color: #ddd; } a.selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="menu"> <ul class="nav"> <li><a class="toggle-colour" href="">Home</a> </li> <li><a class="toggle-colour" href="">Work</a> </li> <li><a class="toggle-colour" href="">Clients</a> </li> <li><a class="toggle-colour" href="c">Contact</a> </li> </ul> </nav>