title: iframes, external pages and jQuery ui tabs
body: <p>I have a page with several tabs. Each tab contains the contents of another web page (lives on the same server, but different directory, and they are all stand alone sites).
  The tabbed page's intention is bring the other pages together in one portal.
  This works great to a point.
  The problem I have with this approach is that I have to use iframes to load the otherpages to preserve their CSS and relative image paths etc.
  This means that all pages load at the time the tab page loads. This isn't ideal. I would like to use ajax to load the contents, but I don't know how to do this using iframes.</p>
  
  <p>Here's the code I have:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a class="tabref" href="#tabs-1"&gt;One tab&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="tabref" href="#tabs-2"&gt;two tab&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="tabs-1" class="tabMain"&gt;
  &lt;div class="tabIframeWrapper"&gt;
      &lt;iframe class="tabcontent" src="site1"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="tabs-2" class="tabMain"&gt;
  &lt;div class="tabIframeWrapper"&gt;
      &lt;iframe class="tabcontent" src="site2"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each included page will also have its own CSS style and it's own URL (site.com/site1 and site.com/site2)</p>
  
  <p>I'd like to be able to use the iframes solution, but load each page only when its tab is selected.</p>
  
  <p>TIA</p>