1. I'm attempting to make a round trip to the server to be able to modify the HTML on a tabbed content container according to the user's response.
2. When I make the round trip to the server the HTML is appended and the previous tab's content is not cleared.
3. If I do not make the trip and allow jQuery to get the correct <div> then I see only the HTML from that tab.
   

The script and the style is the same for both instances.

<script type="text/javascript">
$(function() {
    var $tabs = $('#example').tabs();
    var selected = $tabs.tabs('option', 'selected'); // => 0
    $('#example').bind('tabsselect', function(event, ui) {
        // Objects available in the function context:
        ui.tab     // anchor element of the selected (clicked) tab
        ui.panel   // element, that contains the selected/clicked tab contents
        ui.index   // zero-based index of the selected (clicked) tab
    });
    $('#example').tabs({
        load: function(event, ui) {
            $('a', ui.panel).click(function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
    });
});
</script>
<style type="text/css">
.ui-tabs .ui-tabs-hide {display: none;}
</style>


I have done this two different ways:

Example 1: goes to the server to get the HTML and places it in the appropriate <div> tag.
But the previous content persists and the new content is added to the correct <div> tag.

<div class="demo">
  <div id="example">
    <ul>
      <li><a href="http://hydra.doit.wisc.edu/jQuery/play/Browse.html"  title="Tab Browse">Browse</a></li>
      <li><a href="http://hydra.doit.wisc.edu/jQuery/play/Create.html"  title="Tab Create">Create</a></li>
      <li><a href="http://hydra.doit.wisc.edu/jQuery/play/Search.html"  title="Tab Search">Search</a></li>
      <li><a href="http://hydra.doit.wisc.edu/jQuery/play/Profile.html" title="Tab Preferences"> Preferences</a></li>
    </ul>
  </div>

  <div id="Tab_Browse"></div>
  <div id="Tab_Create"></div>
  <div id="Tab_Search"></div>
  <div id="Tab_Preferences"></div>
</div><!-- End demo -->


Example 2: Here the HTML is already on the individual <div> tags.
When I click on the tab the previous content is cleared and ONLY the new content is shown. WHY?

<div class="demo">

<div id="example">
  <ul>
    <li><a href="#tabs-1">Alice</a></li>
    <li><a href="#tabs-2">Rabbit</a></li>
    <li><a href="#tabs-3">Eaglet</a></li>
  </ul>
  <div id="tabs-1">
    <p>I wonder if I've been changed in the night? Let me think. Was I the same when I got up this morning? I almost think I can remember feeling a little different. But if I'm not the same, the next question is 'Who in the world am I?' Ah, that's the great puzzle!</p>
  </div>
  <div id="tabs-2">
    <p>Oh my ears and whiskers, how late it's getting!</p>
  </div>
  <div id="tabs-3">
    <p>Speak English! I don't know the meaning of half those long words, and I don't believe you do either!</p>
  </div>

</div><!-- End demo -->