I'm having a wierd problem with jquery ui tabs.
here's the code:
<div class="ym-gbox">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<h1>Versions Übersicht</h1>
<br />
<div id="tabs">
<ul>
<li><a href="#tabs-1">System Kern</a></li>
<li><a href="#tabs-2">Anwendungen</a></li>
<li><a href="#tabs-3">Bibliotheken</a></li>
</ul>
<div id="tabs-1">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="bordertable">
<tr><th>Name</th><td>System Kern</td></tr>
<tr><th>Version</th><td>1.0.0 </td></tr>
<tr><th>Beschreibung</th><td></td></tr><tr><td colspan="2">System Kern</td></tr>
<tr><th>Webseite</th><td>http://www.dsws.biz</td></tr>
<tr><th>Lizenz</th><td>Dark Star Web Services Source Lizenz</td></tr>
<tr><th>Autor</th><td>
</td></tr>
</table>
</div>
<div id="tabs-2">
b
</div>
<div id="tabs-3">
c
</div>
</div>
</div>
As soon as the page loads, the complete page is loaded into the tab tabs. I don't really have a clue why this happens.
I found the core of the problem. The System does not prevent the default handler from beeing fired. For Links it is an redirect to the page. If you add the preventDefault inside of a click handler and handle the click event according to what you want to do (for example change Tab to selected tab) you can bypass this.
example:
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
This example is taken from this page: http://getbootstrap.com/javascript/#tabs
I had a quite similar problem today. After adding this code it worked without a problem.