title: How do I get basic jQuery tabs to work inside a .Net modal popup?
body: <p>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?</p>
  
  <p><strong>Update:</strong></p>
  
  <blockquote>
    <p>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 <a href="http://api.jquery.com/live/" rel="nofollow">live</a> 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:</p>
  </blockquote>
  
  <pre><code>$(document).live('load', bind_tabs);
  </code></pre>
  
  <p><strong>Any ideas?</strong></p>
  
  <p>Style sheet and Javascript links included on page:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Added the following line to my stylesheet:</p>
  
  <pre><code>.ui-tabs .ui-tabs-hide { display: none; }
  </code></pre>
  
  <p>Added the following script to the page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(function () {
    $("#tabs2").tabs();
    $("#tabs").tabs();
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;a href="#tabs-1"&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-2"&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-3"&gt;Aenean lacinia&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;div id="tabs-1"&gt;
        &lt;p&gt;Tab 1 content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="tabs-2"&gt;
        &lt;p&gt;Tab 2 content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="tabs-3"&gt;
        &lt;p&gt;Tab 3 content&lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also noticed on the "theming" documentation on the page (<a href="http://jqueryui.com/demos/tabs/#theming" rel="nofollow">http://jqueryui.com/demos/tabs/#theming</a>) that it states the following. Should I manually put in all those styles (like ui-widget) or rely on the framework to do it?</p>
  
  <blockquote>
    <p>Sample markup with jQuery UI CSS
    Framework classes</p>
  </blockquote>
  
  <pre><code>&lt;div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"&gt;
     &lt;ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"&gt;
       &lt;li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"&gt;&lt;a href="#tabs-1"&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;
        &lt;li class="ui-state-default ui-corner-top"&gt;&lt;a href="#tabs-2"&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;
     &lt;div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"&gt;
        &lt;p&gt;Tab one content goes here.&lt;/p&gt;
     &lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <pre><code>&lt;div id="tabs"&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;a href="#tabs-1"&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-2"&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tabs-3"&gt;Aenean lacinia&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;div id="tabs-1"&gt;
        &lt;p&gt;Tab 1 content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="tabs-2"&gt;
        &lt;p&gt;Tab 2 content&lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="tabs-3"&gt;
        &lt;p&gt;Tab 3 content&lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>