javascript not working with HTML5

Question

I started to implement some new html5 features (standards, nothing fancy) in my project. Just the standard header, footer, aside, ect. For some reason a javascript code that I used on a past project doesn't work now and I can't figure out what the problem is.

I compared the code (html/javascript) with my new project and the past project (with javascript working) and I don't see any difference. The only thing I can think of is the change in html versions.

By the way Im trying to implement a script that highlights a current link from a menu. It is supposed to use javascript to add/remove a ".selected" code the anchor tags in the menu and relates to the current page and link.

here is the code:

<aside>
        <section>
            <Strong>Quick Links</strong>
                <menu id="side_menu">
                    <ul>
                        <li><a href="application.php">Sign Up</a></li>
                        <li><a href="testimonials.php">Testimonials</a></li>
                        <li><a href="diploma.php">The Process</a></li>
                        <li><a href="diploma.php">Course Listings</a></li>
                        <li><a href="about.php">American High School</a></li>
                     </ul>
                </menu> 

        <script>
            $(document).ready(function() {
                var loc = window.location.href; // The URL of the page we're looking at
                $('#side_menu a').each(function() {
                    if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor
                            $(this).addClass('selected'); // Mark it as selected
                    }
                });
            });
        </script>

        </section>
</aside> 

Here is the link to the site here (Side Panel)

I would appreciate any help on this issue. I spent hours trying to figure this out. Thanks for any help.

gdinari