Question

使用Jquery UI选项卡，我尝试在选择特定选项卡时显示/隐藏不同的div。当标签操作位于页面的主要内容div中时，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

当有人选择标签时，您可以挂钩'select'事件：

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

'秘密'是我已经添加到你的HTML中的类，做任何你想要定位那些侧边栏面板的东西。

jsFiddle

Answer 2

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

可能有更好的方法来检测选择哪个标签。

其他替代方案：

ui.tab.panel.id ==“tabs-1”＆amp;＆amp; ui.tab.panel.id ==“tabs-2”

ui.index == 0＆amp;＆amp; ui.index == 1

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

2 个答案: