试图使jQuery工作

Question

I am having a hard time getting any jquery code to work. I've tried some examples and none work for me. Here is an example that sort of works in chrome from the C drive, but not from dropbox on the web, nor does it work at all in ie9.

When it is 'sort of' working on chrome from my C drive, it starts out displaying all the tabs instead of just Tab A as it is supposed to. Then after clicking one of the links it only shows the corresponding tab.

My end goal is to modify my website so that the whole page doesn't flash while reloading every time I click on a menu item.

<!--  found at: http://jsfiddle.net/uFgtS/ -->

<script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript'>

$(window).on('hashchange', function() {
    $('div.tab').hide();
    $(location.hash).show();
});

$('a.hash').on('click', function(e){
    e.preventDefault();
    location.hash = $(this).data('hash');
});
</script>

<a href="#A" data-hash="A" class="hash">A Link</a>
<a href="#B" data-hash="B" class="hash">B Link</a>
<a href="#C" data-hash="C" class="hash">C Link</a>

<div id="A" class="tab">Tab A</div>
<div id="B" class="tab hidden">Tab B</div>
<div id="C" class="tab hidden">Tab C</div>

Answer 1

You forgot :

$(document).ready(function() {

    // your code goes here

});

so when attaching the click handler to a.hash , there's no such element in the DOM.

Answer 2

If you place your jQuery before the elements that it affects you need to wrap it in

$(document).ready(function() {
    // Code to be run once the document is ready
}

Alternatively, place your scripts at the very end of the document body to make $(document).ready() redundant.