jQuery UI Ajax tabs problem

[eluser]blorriman[/eluser]
Sorry if the this has been answered before, but I couldn't find it.

I have a jQuery tabs set up that works with the content already loaded with the page, but I want to load remote content when the tab is clicked. I read through the jQuery tabs - load content via Ajax - but I can't get it to work, it just opens the content in a new page.

here is my view :

Code:

<div id="tabs">
    <ul id="featured-links">
        <li><a href="#tab-collapsible">collapsible content</a></li>
        <li><a href="#tab-tables">zebra tables</a></li>
        <li><a href="#tab-dl">definition list</a></li>
        <li><a href="#tab-blog">blog test</a></li>
        <li><a href="/start/remote_tab">remote</a></li>
    </ul>
    <div id="featured-content">
        <div id="tab-collapsible">
            &lt;?php $this->load->view('default/collapsible-content'); ?&gt;
        </div>
        <div id="tab-tables">
            &lt;?php $this->load->view('default/tables'); ?&gt;
        </div>
        <div id="tab-dl">
            &lt;?php $this->load->view('default/definition-list'); ?&gt;
        </div>
        <div id="tab-blog">
            &lt;?php $this->load->view('default/blog'); ?&gt;
        </div>
    </div>
</div>

As you can see from the last tab the href is /start/remote tab which is just loading the view:

Code:

function remote_tab() {
        $this->load->view('default/remote-tab');
    }

Any direction would be greatly appreciated.

Cheers,