2.     <div id="tabs">
3.         <ul>
4.             <li><a href="Tool1">Tool One</a></li>
5.             <li><a href="Tool2">Tool Two</a></li>
6.             <li><a href="Tool3">Tool Three</a></li>
7.         </ul>
8.     </div>

And in my document ready:

2.     $( "#tabs" ).tabs( {
3.         beforeLoad: function ( event, ui ) {
4.             ui.jqXHR.error( function () {
5.                 ui.panel.html(
6.                   "Couldn't load this tab." );
7.             } );
8.         }
9.     } );

Tool1, Tool2 and Tool3 are tools located on my web api app- same app that serves up the page with the tabs.

The problem is that while the first tab appears to be loaded perfectly and everything looks good, when I click on the second tab I get taken directly to http://localhost/Tool2` instead of seeing Tool2 content in the tab area.

Any thoughts on why this might be happening?