Adding an active class with JQuery should work like this, right?

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="abo开发者_运维问答ut_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??!!

---

You're missing the '#' in the 2nd selector.

You should replace the 2nd selector with $(this)

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

---

<script type="text/javascript">
$(document).ready(function() {
    $('#topnavtwo li a').click(function() {
        $('#topnavtwo li a').addClass('active'); // Look at this line
        // Or replace it with (without the //):
        // $(this).addClass('active');
    });
});
</script>

See the comment in the click handler.

---

this should work (missing hash):

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

---

you forgot a # in the 4th line of your script

---

To help in the progress a bit without #s.

Instead asking it first you can simply check your code by Firebug (in Firefox) or in the developer menu in Chrome.

Another solution if you alert something after all events in javascript like:

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

So you can see when the code broke. Or later you can try and catch everything.

try {
var tmp = doSomething();
if (tmp == something.errorCondition)
throw new Error("Error condition in X");
} catch(err) {
//handle ((err && err.message) || err.toString())
}