Jquery UI - Tabs reacting weired

Question

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.

Answer 1

For me this exact problem was related to the base tag and couldn't be solved by click event Chris idea refers to. It may also occur if your urls are being rewritten to have the full absolute url, e.g. by a caching tool or .htaccess

So if your tabs were being rewritten as <a href="http://example.com/page/#tab1">tabname</a>

Then a solution is to remove the full url before initializing the tabs. The following (expanded to keep it simple), removes everything leading up to the #

jQuery("#mytabs ul li a").each(function () {
    var current = jQuery(this).attr("href");
    var n = current.indexOf("#");
    jQuery(this).attr("href", current.substr(n));
});

jQuery("#mytabs").tabs( .. )