How do I get basic jQuery tabs to work inside a .Net modal popup?

Question

Really simple question: Am I missing something? Seems like this should be all that is necessary for the basic setup... currently I'm getting an un-stylized version (i.e. no tabs, just plain text/html). So they don't look like tabs and when you click them nothing hides/shows as would be expected with tabs. Do I have to manually hook up javascript to show and hide the contents of the tabs or does the framework do this for me?

Update:

So I tested the code out and this works fine for basic tabs. However, I need to use this inside a .Net modal popup using their "Ajax" toolkit. Essentially this is doing a postback which I've noticed tends to fight with jQuery. In the past, I've used the jQuery live events, but I'm not sure what to bind it to... Usually you bind to an event on an object, like a click handler for a button. Here, I need to attach the tab assignment/binding ( using .tabs() ) via a live event but I'm not sure which one. I tried binding to the document load event but no luck with that:

$(document).live('load', bind_tabs);

Any ideas?

Style sheet and Javascript links included on page:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

Added the following line to my stylesheet:

.ui-tabs .ui-tabs-hide { display: none; }

Added the following script to the page:

<script type="text/javascript">
  $(function () {
  $("#tabs2").tabs();
  $("#tabs").tabs();
  });
</script>

HTML:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Also noticed on the "theming" documentation on the page (http://jqueryui.com/demos/tabs/#theming) that it states the following. Should I manually put in all those styles (like ui-widget) or rely on the framework to do it?

Sample markup with jQuery UI CSS Framework classes

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Answer 1

Everything looks fine to me. Are you sure you are linking your files in correctly?

http://jsfiddle.net/GwnHq/