Jquery UI 选项卡 - 选择选项卡还会在页面的另一部分切换 DIV 内容

Question

使用 Jquery UI 选项卡，我尝试在选择特定选项卡时显示/隐藏不同的 div。 div 将位于侧边栏，而 tab 操作位于页面的主要内容 div 中。

这是我的代码：

            <div id="tabs">
            <ul>
            <li><a href="#tabs-1">tab 1</a></li>
            <li><a href="#tabs-2">tab 2</a></li>
            </ul>

            <div id="tabs-1">
            Tab 1 Content
            </div>

            <div id="tabs-2">
            Tab 2 Content
            </div>

            </div>


            <div id="sidebar">

            <div id="tabs1show">This is "#sidebar tabs1show ... 1</div>
            <div id="tabs2show">This is "#sidebar tabs2show"... 2</div>
            </div>

选择＃TABS-1时，我希望＃tabs1show内容出现在侧边栏中。选择#tabs-2 时，#tabs1show div 被隐藏，#tabs2show 内容出现在侧边栏中。我知道我必须在“ $tabs = $('#tabs').tabs(); ”中添加某种显示/隐藏（可能）组合来链接操作，但我不知道确切的方式这样做。我对 jquery 比较陌生，所以请，任何帮助将不胜感激。

谢谢。

Answer 1

当有人选择选项卡时，您可以挂钩“选择”事件：

$('#tabs').tabs({
   select: function(event, ui) {
       $('.secret').hide().eq(ui.index).show(); 
   }
});

'secret' 是我添加到您的 html 中的类，针对这些侧边栏面板做任何您想做的事情。

jsFiddle

Answer 2

你可以这样做http://jsfiddle.net/gurkavcu/ZcHvV/。

可能有更好的方法来检测选择了哪个选项卡。

其他选择：

ui.tab.panel.id == "tabs-1" && ui.tab.panel.id == "tabs-2"

ui.index == 0 && ui.index == 1