javascript tabs not working in rails app

This is in application.html.erb:
<script type="text/javascript"
src="../javascripts/application.js"></script>
<script type="text/javascript"
src="../javascripts/jquery-1.4.2.js"></script>

                    <div id="content">

                      <%= yield :tabContent %>

                    </div>

This is in index.html.erb in views/products:
<% content_for :tabContent do %>
<div class="tabContent" id="a">
    <p>
        Content
    </p>

</div>

<div class="tabContent" id="b">

    <p>
        Content
    </p>

</div>

<div class="tabContent" id="c">
    <p>
        Content
    </p>
</div>
<% end %>

This is in application.js:

$(document).ready(function() {
var linksToInt = {
    "#i": 0,
    "#j": 1,
    "#k": 2,
  "#a": 3,
  "#b": 4,
  "#c": 5,
  "#d": 6,
  "#e": 7,
  "#f": 8,
  "#g": 9,
  "#h": 10}

$("a").click(function(){displayDiv($(this).attr("href"));});

function displayDiv(id){
var linkInt = linksToInt[id];
on_btn_click(linkInt);
}

function on_btn_click(displayDiv){
    displayDiv != null ? null : this;

    switch(displayDiv){
        case 0:
            $("#content > div").hide();
            $("#a").show();
            break;
        case 1:
            $("#content > div").hide();
            $("#b").show();
            break;
        case 2:
            $("#content > div").hide();
            $("#c").show();
            break;
        case 3:
            $("#content > div").hide();
            $("#d").show();
            break;
      case 4:
          $("#content > div").hide();
          $("#e").show();
          break;
    case 5:
        $("#content > div").hide();
        $("#f").show();
        break;
    case 6:
      $("#content > div").hide();
      $("#g").show();
      break;
    case 7:
      $("#content > div").hide();
      $("#h").show();
      break;
    case 8:
      $("#content > div").hide();
      $("#i").show();
      break;
    case 9:
      $("#content > div").hide();
      $("#j").show();
      break;
    case 10:
      $("#content > div").hide();
      $("#k").show();
      break;
    }
}});

It just doesn't hide the divs and show the one specified. I tried it out
in a regular html and javascript file to test it and it worked, but in
rails app, it isn't working.

Thanks for any response.

Hi John,

This works:
window.onload = function(){
    var links = document.getElementsByTagName("A");
        for(var i = 0; i < links.length; i++){
            links[ i ].onclick = function(){alert("click");};
        }
};

This doesn't:
$(document).ready(function() {
    var links = document.getElementsByTagName("A");
        for(var i = 0; i < links.length; i++){
            links[ i ].onclick = function(){alert("click");};
        }
});

Does this mean there's an issue with jquery?

The reason why I am confused is because I am using stepcarousel.js
plugin and that requres jquery and this plugin works.

So as you can see, I am real confused.

firebug is telling me "$" is not defined