Separating an item between jQuery user interface tabs?

Question

I use jQuery UI tabs to split content on my page. I have a “link bar” that I would like to hang at the bottom of each tab. (The text of the tab will change, but in general they will navigate through the user left or right through the tabs.)

The hosting div #linkBar inside the first tab makes it “correct”, inside the border of Themeroller. Place it right outside the "parent tab" to place links below the border of the topic. I tried to create a div divider, but it just pushes the #linkBar further.

Of course, when the user switches to another tab, the link bar leaves. How is item ownership organized between tabs? Should I dynamically destroy the div #linkBar on the tab that moves away from it and rearranges it on the tab that is being transitioned to? Or is there a better way to move it between them or just control visibility?

I would like the link bar to match the contents of each tab as a footer that “floats” one or two lines below the last content of each tab (instead of having a fixed position relative to the tab bar).

Answer 1

... jQuery UI linkBar. jsFiddle:

div linkBar div tabOne tabs div:

<div id="container">
    <div id="title">
      <h1>title bar</h1>
    </div>
    <div id="tabs">
        <ul>  
            <li><a href="#tabone">one</a></li>  
            <li><a href="#tabtwo">two</a></li>  
            <li><a href="#tabthree">three</a></li>
        </ul>  
        <div id="tabone">
            content goes here
            <br><br><br><br>more stuff<br><br><br>more stuff<br><br>
        </div>    
        <div id="tabtwo">
             content goes here...
        </div>
        <div id="tabthree">
             content goes here...
        </div>
        <div id="linkBar">
            <span id="leftLink"><< left link</span>
            <span id="rightLink">right link >></span>
        </div>
    </div>
</div>

linkBar, , :

#linkBar {
    display: none;
    margin: 10px auto;
}

jQuery $linkBar. jQuery, :

$("#accordion").accordion({ header: "h3" });

var $tabs = $("#tabs"),
    $linkBar = $("#linkBar");

$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();

$('#title').click(function() {

    $tabs.tabs('select', 0);
    return false;

});

. class="ui-tabs-panel ui-widget-content ui-corner-bottom" div linkBar . , , , JS.