Jquery UI Tabs with ajax content: Hrefs not workin

Question

Trying to use UI Tabs to replace traditional links. However I have hit a snag with getting the href attribute to resolve to the specified url upon clicking the tabs.

Below is my html:

<div id = "tabs">
     <ul>
         <li><a href = "#main" >Main Content</a></li>
         <li><a href = "<?php echo base_url.'inventory/list' ?>">List</a></li>
         <li><a href = "<?php echo base_url.'inventory/add' ?>">Add</a></li>
         <li><a href = "<?php echo base_url.'inventory/edit' ?>">Edit</a></li>
    </ul>
 </div>

Jquery:

<script type="text/javascript">
   $(document).ready(function(){
    $('#tabs').tabs();
   })
</script>

Html Body:

<div id = "main">
<?php $this->load->view($main); ?>
</div>

Inspecting the UI Tabs using Firebug it shows e.g for List

http://localhost/inventory#ui-tabs-1

instead of (I imagine if it were to load the right content)

http://localhost/inventory/list#ui-tabs-1

Only the #main tab loads the correct content, nothing (other than Firebug inspection reading ui-tabs-x, where x is the index of the tab clicked ) changes upon clicking the other tabs.

Is there something I am missing? How can i do this better?

Thanks in advance.