#!使ってタブチェンジとかするサンプル

fragment_url.js

/*
* https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
* https://github.com/cowboy/jquery-hashchange/raw/v1.3/jquery.ba-hashchange.js
*/
(function($){
  var tab1 = function() {
    $("#tab1").hide();
    $("#tab2").hide();
      $.ajax({
        url: "change_tabs",
        type: "get",
        dataType: "json",
        data: ({
          "tab": "first"
        }),
        success: function(request){
          //適当に$.eachでも使いながらDOMいじって値入れる
        });
      },
      complete: function() {
        $("#tab1").show("bind");
      }
    });
  };

  var tab2 = function() {
    $("#tab1").hide();
    $("#tab2").hide();
      $.ajax({
        url: "change_tabs",
        type: "get",
        dataType: "json",
        data: ({
          "tab": "second"
        }),
        success: function(request){
          //適当に$.eachでも使いながらDOMいじって値入れる
        });
      },
      complete: function() {
        $("#tab2").show("bind");
      }
    });
  };

  // ハッシュの変化を監視
  $(window).hashchange(function() {
    var parsed = decodeURIComponent(location.hash).split("/");
    if (parsed[1]) {
      switch (parsed[1]) {
        case 'tab1':
          tab1();
          break;
        case 'tab2':
          tab2();
          break;
      }
    } else {
      tab1();
    }
  });
  $(window).hashchange();
});