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