Linking to jQuery tabs from a href

Question

I'm trying to link to jQuery tabs from a href, but it doesn't seem to be working. How do you go about doing this. I want a tab to open when a user clicks on a link. This is my code so far: http://jsfiddle.net/AXEEe/.

HTML

<a href="#Allocated">Allocated</a>
<a href="#Declined">Declined</a>
<a href="#Pending">Pending</a>
<a href="#Failed">Failed</a>

<div style="padding-top: 10px">
  <div id="tabs">
    <ul>
      <li><a href="#Allocated" id="#Allocated">Allocated Requests</a></li>
      <li><a href="#Declined">Declined Requests</a></li>
      <li><a href="#Pending">Pending Requests</a></li>
      <li><a href="#Failed">Failed Requests</a></li>
      </ul>
          <div id="Allocated">
              Content 1
          </div>
          <div id="Declined">
              Content 2
          </div>
          <div id="Pending">
              Content 3
          </div>    
          <div id="Failed">
              Content 4
          </div>
        </div>
</div>

​JS

$(function() {
        $( "#tabs" ).tabs();
});​

Answer 1

$(function() {
    $("#tabs").tabs();
    $("a[href=#Allocated]").click(function() {
        $("#tabs").tabs("option", "active", 0);
    });
    $("a[href=#Declined]").click(function() {
        $("#tabs").tabs("option", "active", 1);
    });
    $("a[href=#Pending]").click(function() {
        $("#tabs").tabs("option", "active", 2);
    });
    $("a[href=#Failed]").click(function() {
        $("#tabs").tabs("option", "active", 3);
    });
});​

FIDDLE