JQuery not responding on site

[melting_dog]

Hi all,

 

I know this is a bit amiguous but I am hoping someone can suggest something.

 

I have what should be a simple piece of code - just hides and shows divs when a link is clicked.

 

JQuery is:

 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

            $('#tab-bar a').on('click', function(e){
            e.preventDefault();
            var nextPage = $(e.target.hash);
            $('#pages.current').removeClass('current');
            });
        });
        
    </script>

 

CSS:

#pages > div {
    display: none;
}

#pages > div.current {
    display: block;
}

 

HTML:

<div id="wrapper">
          
          <div id="main-content">
                <!--<div id="accelerometer">Waiting for accelerometer...</div>-->
              <div id="pages">
                  <div id="map" class="current">
                      Map
                  </div>
                  
                  <div id="camera">
                      Camera
                  </div>
                  
                  <div id="twitter">
                      Twitter
                  </div>
                  
              </div>
          </div><!--MAIN-CONTENT-->
      </div><!--WRAPPER-->
      
      <footer>
          <ul id="tab-bar">
              <li>
                  <a href="#map">Map</a>
              </li>
              
              <li>
                  <a href="#camera">Camera</a>
              </li>
              
              <li>
                  <a href="#twitter">Twitter</a>
              </li>
          </ul>
      </footer>

 

I have tested to see if jquery is loaded and its ok. I have tested to see if the click is working using console.log and thats ok - I just dont know what could be wrong!

 

Any help would be greatly appreciated! Thanks!

[trq]

You might want to describe your problem while your here.

[melting_dog]

You might want to describe your problem while your here.

 

Sorry -

 

So the code is meant to show the div related to the a tag thats been clicked in  <footer>. If I click <a href="#camera">Camera</a> I want <div id="camera">Camera</div> to show - ie: become <div id="camera" class="current">Camera</div> as .current has the display:block; css, whist all other divs within #pages have display:none; css.

 

Right now when I run the script simply nothing happens. I am hoping that someone with a fresh set of eyes and a little more experience can help me out.

 

Thanks!

[melting_dog]

OK got it working using:

$(document).ready(function() {

 

            $('#tab-bar a').on('click', function(e){

            e.preventDefault();

            $('#pages .current').removeClass('current');

            $(this.hash).addClass('current');

            });

        });

 

Main issue was there was no space between #pages and .current

 

Cheers