在jQuery UI中将标签页与容器分开

Question

我有一个具有三列布局的页面（主导航栏在左侧，中间控制台在中间，特定页面选项/导航在右侧）。 到目前为止，我一直在中央控制台区域中使用我页面之一的jQuery UI的Tabs小部件。

我想做的是将选项卡分开（将它们放在右侧列中），同时将内容位置保持在中间。 像这样：

<div id="center_console">
    <div class="tabs_container" id="pets"></div>
    <div class="tabs_container" id="family"></div>
    <div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
    <div id="tabs">
       <ul>
            <li>Pets</li>
            <li>Family</li>
            <li>Bio</li>
       </ul>
     </div>
</div>

但是到目前为止，我还没有找到一种使用jQuery UI来做到这一点的方法（似乎要求将选项卡和内容放在同一容器中）。

Answer 1

我认为您需要做的是使用“选择”方法

因此，您可以将链接绑定到要单击的选项卡

<div id="center_console">
    <div class="tabs_container" id="pets"></div>
    <div class="tabs_container" id="family"></div>
    <div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
   <ul>
        <li id="pets">Pets</li>
        <li id="family">Family</li>
        <li id="bio">Bio</li>
   </ul>
 </div>
</div>
$(function(){
//set-up your tabs as normal first

     $('#bio').click(function(){
        $('#center_console').tabs("select", '#bio');
     });
});

您可能还需要在center_console中将某些链接设置为选项卡，但是您可以使用CSS隐藏这些链接。 我不确定tabs（）如何在后台运行。 我设法通过使用Firebug破解jqueryui演示来使此工作正常进行，但是由于某些原因，我无法使这些选项卡在jsfiddle中工作。 如果您可以设置一个示例，那么我很高兴对其进行编辑以向您展示我所做的事情

感谢以下有用的评论，我意识到我没有遵循最佳实践。 我已经设置了一个小提琴，该小提琴应该可以实现您想要的一切（所有这些都需要正确设置样式）。 可以在这里找到http://jsfiddle.net/GKNC9/1/

谢谢