Question

OK, I’m going crazy here! Why won’t this work!! I’m trying to add a class of active to top level menu navigation… so for my menu that would be the About, News, Business, etc… buttons. Here is the html for the menu:

<ul id="topnavtwo">
   <li>
       <a href="/CoVPrototype/about.php" class="about_pg">About Vancouver</a>
            <div class="sub">
                <ul class="lonesome_group">

                    <li><h2><a href="#">History</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Geography</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Things To Do</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Population</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Weather</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Education</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Health</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                    <li><h2><a href="#">Cemetery</a></h2></li>
                    <div class="lonesome_link_ul"><hr /></div>
                </ul>
                <ul>
        <li>
            <a href="/CoVPrototype/news.php" class="news_pg">In The News</a>
            <div class="sub">
                    <ul style="width: 160px;">
                        <li><h2><a href="#">Special Events</a></h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><h2><a href="#">Media Resources</a></h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><h2><a href="#">Archive</a></h2></li>
                        <div class="short_ul"><hr /></div>
                    </ul>
                </div>
        </li>

<!--Mega Menu Section-->
            <a href="/CoVPrototype/business.php" class="doing_business_pg">Doing Business</a>
              <div class="sub_bus">
                    <ul class="lonesome_group">

                        <li><h2><a href="#">Economic Development</a></h2></li>
                        <div class="lonesome_link_ul"><hr /></div>
                        <li><h2><a href="#">Taxes</a></h2></li>
                        <div class="lonesome_link_ul"><hr /></div>
                    </ul>

                    <ul style="width: 160px;">
                        <li><h2>Business Assistance</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Doing Business With The City</a></li>
                        <li><a href="#">Starting a new Business</a></li>
                        <li><a href="#">Incentives</a></li>
                        <li><a href="#">Information and Rules</a></li>
                    </ul>

                    <ul style="width: 160px;">
                        <li><h2>Liscence And Permits</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Types of Business Licenses</a></li>
                        <li><a href="#">Apply for Business License</a></li>
                        <li><a href="#">Pay &amp; Manage Business </a></li>
                        <li><a href="#">License</a></li>
                        <li><a href="#">TV, Radio &amp; Film</a></li>
                        <li><a href="#">Retail Sidewalk</a></li>
                        <li><a href="#">Permits</a></li>
                    </ul>

                    <ul style="width: 160px;">
                        <li><h2>Opportunities With<br /><br /><br /><br />The City</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Bids</a></li>
                        <li><a href="#">Contacts Awarded</a></li>
                        <li><a href="#">Ethical Purchasing Policy</a></li>
                        <li><a href="#">Purchase Order Items</a></li>
                    </ul>

                     <ul style="width: 160px;">
                        <li><h2>Walking</h2></li>
                        <div class="short_ul"><hr /></div>
                        <li><a href="#">Routes &amp; Maps</a></li>
                        <li><a href="#">Neighbourhoods</a></li>
                        <li><a href="#">Green Streets</a></li>
                        <li><a href="#">Initiatives</a></li>
                    </ul>
            </div>
        </li>
    </ul>

And my JQuery is like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('#topnavtwo li a').click(function() {
          $('topnavtwo li a').addClass('active');
        });
     });
    </script>

I don’t get it, shouldn’t this work??!!

Answer 1

this should work (missing hash):

$('#topnavtwo li a').addClass('active');