How to show tabpage in specific Div

I am using jQuery tab control:

http://jqueryui.com/demos/tabs/#ajax

My design is:

<div class="container2">
    <!-- review tabs -->
    <div id="tab1">
    <ul>
        <li id="tf1"><a href="../LoadUserControl.aspx?ucid=1" title="tabs-1">Reviews</a></li>
        <li id="tf2"><a href="../LoadUserControl.aspx?ucid=2"  title="tabs-1">Apps of the Week</a></li>
        <li id="tf3"><a href="../LoadUserControl.aspx?ucid=3"  title="tabs-1">Videos</a></li>
        <li id="tf4"><a href="../LoadUserControl.aspx?ucid=4"  title="tabs-1">Photos</a></li>
    </ul>

    <!-- its showing content of tab here -->
</div>

<!-- I want to show content of tab page here -->

Its by default opening tabpage below "</ul>" where as, i need that tabpage to show out of "</ul>'s" parent div

jQuery I am using:

 $(function () {
    $("#tab1").tabs({
        ajaxOptions: {
            error: function (xhr, status, index, anchor) {
                $(anchor.hash).html(
                                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                    "If this wouldn't be a demo.");
            }
      开发者_如何学编程  }
    });
});

I had the same issue once. Unfortunately, that's the tab widget structure. You can't change it in a clean way. The only thing you could do is to move the content with .append() every time, but It's a dirty move.

Hope to have helped. Cheers

I'm not totally sure of this as i can't test it, but you could give it a try. In the documentation i see:

Note that if you wish to reuse an existing container, you could do so by matching a title attribute and the container's id:

...

and a container like:

...

(Note how white space is replaced with an underscore)

So you could do:

<li id="tf1"><a href="../LoadUserControl.aspx?ucid=1" title="tabs-new">Reviews</a></li>
            <li id="tf2"><a href="../LoadUserControl.aspx?ucid=2"  title="tabs-new">Apps of the Week</a></li>
            <li id="tf3"><a href="../LoadUserControl.aspx?ucid=3"  title="tabs-new">Videos</a></li>
            <li id="tf4"><a href="../LoadUserControl.aspx?ucid=4"  title="tabs-new">Photos</a></li>
</ul>

and then create a div with id='tabs-new' where you want to put the content.

but as i said i never tried this