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

我认为您需要做的是使用'select'方法

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

<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来隐藏这些链接。我不是100％肯定tab（）在幕后工作的方式。我设法通过使用firebug破解jqueryui演示来实现这一点，但由于某种原因，我无法让标签在jsfiddle中工作。如果您可以设置一个示例，我很乐意编辑它以向您展示我做了什么

感谢下面的有用评论，我意识到我并没有遵循这里的最佳做法。我已经设置了一个应该达到你想要的小提琴（所有这些都是你需要正确设计的）。它可以在http://jsfiddle.net/GKNC9/1/

找到

感谢

在jQuery UI中将选项卡与Container分开

1 个答案: