jQuery UI的标签 - 选择标签还导

页

的另一部分使用jQuery UI选项卡DIV的内容，我想不同的div显示/隐藏当选择一个特定的标签。 div将位于侧栏上，而制表符操作位于页面的主内容div中。jQuery UI的标签 - 选择标签还导

这里是我的代码：

  <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被选中，我想＃tabs1show内容出现在侧边栏。当选中＃tabs-2时，＃tabs1show div被隐藏，＃tabs2show内容出现在边栏中。我知道我必须在“$ tabs = $（'＃tabs'）tabs（）;”中加入show/hide（可能）的某种组合来链接动作，但我不知道确切的方式这样做。我相对较新的jquery所以，请，任何帮助将不胜感激。

谢谢。

来源

2012-01-07 runner78

您可以挂接到 '选择' 事件，当有人拿起一个标签：

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

'秘密'是我已经添加到你的html的类，做任何你想要的目标侧边栏面板。

jsFiddle

来源

2012-01-07 05:00:00 Sinetheta

太感谢你了！我没有期待这么快速的回应。 – runner78 2012-01-07 05:43:00

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

大概已经有更好的方法来检测选择了哪个选项卡。

其它替代方案：

ui.tab.panel.id == “选项卡-1” & & ui.tab.panel.id == “选项卡-2”

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

来源

2012-01-07 04:52:43 Luffy

ui.index给你不索引你连接到HTML – Sinetheta 2012-01-07 05:01:34

jQuery UI的标签 - 选择标签还导

回答

相关问题