CODEWITHSUNDEEP
jquery
art_wired
art_wired

Reputation: 767

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="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??!!

Upvotes: 0

Views: 134

Answers (5)

Babak Naffas
Babak Naffas

Reputation: 12571

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>

Upvotes: 6

R&#233;p&#225;s
R&#233;p&#225;s

Reputation: 1820

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())
}

Upvotes: 0

Tiddo
Tiddo

Reputation: 6554

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

Upvotes: 0

jm_toball
jm_toball

Reputation: 1217

this should work (missing hash):

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

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49218

<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.

Upvotes: 1

Related Questions