jQuery UIのTabsを使って切り替えるタブの中身のコンテンツ部分を別ファイルにしたい

他にいいのがなくて仕方なく使ってるjQuery UIですが、一番よく使う、いや、使いたくなるのが、Tabsを使ったタブレイアウトですね。
デザイナーがぱぱぱっと作ってくれればいいんだけど、いないし。
ということでそのTabsですが、サンプルのソースを見ると、
こんな感じになっていて、

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">メニュー１</a></li>
    <li><a href="#tabs-2">メニュー２</a></li>
    <li><a href="#tabs-3">メニュー３</a></li>
  </ul>
  <div id="tabs-1">
    <p>一個目</p>
  </div>
  <div id="tabs-2">
    <p>2個目</p>
  </div>
  <div id="tabs-3">
    <p>3個目</p>
  </div>
</div>

切り替えるコンテンツの中身も全部同じ一個のファイル（テンプレ）に書く、それを出したり、隠したりする、ということになっている。
中身がちょびっとだったらいいけれども、量が多いとソース書く時に長くなるし、見づらくなるし、分割したい訳です！
別ファイルに。

ということで考えてみたんだが、、
HTMLの方は、

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">メニュー１</a></li>
    <li><a href="#tabs-2">メニュー２</a></li>
    <li><a href="#tabs-3">メニュー３</a></li>
  </ul>
  <div id="tabs-1">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
</div>

コンテンツ部分を空っぽにしておいて、

$("#tabs").tabs({
  select: function(event, ui) {
    if (ui.index == 0) {
      $(ui.panel).load('index.php');
    }
    else if (ui.index == 1) {
      $(ui.panel).load('menu.php');
    }
    else if (ui.index == 2) {
      $(ui.panel).load('user.php');
    }
  }
});

とするのはどうだろうか。
もちろん、.load() で呼び出すindex.phpとかには<div>の間に入る内容を出力させます。
もっといい方法ありますか？