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

使用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>

表1内容
表2内容
这是“#侧栏选项卡1显示…1
这是“#侧栏选项卡2显示”…2

选择“tabs-1”时，我希望“Tabs1显示内容”显示在侧栏中。选择“tabs-2”时，“Tabs1显示div”隐藏，而“Tabs2显示内容”显示在侧栏中。我知道我必须在“$tabs=$（'#tabs'）.tabs（）中放置某种显示/隐藏（可能）组合；“链接该操作，但我不知道确切的方法。我对jquery比较陌生，因此，请提供任何帮助，我们将不胜感激

谢谢。

你可以这样做

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

其他备选方案：

ui.tab.panel.id==“tabs-1”和&ui.tab.panel.id==“tabs-2”

---

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

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

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

“secret”是我添加到html中的类，可以针对这些侧边栏面板执行任何操作

---

ui.index为您提供索引，而无需将您连接到HTMLANK！我没想到会有这么快的响应。