将jQuery菜单链接到jQuery选项卡

Question

是否可以将jQuery菜单链接到选项卡？

例如，如果用户在下面的菜单中选择"By Filter“，我希望它打开选项卡。我怎样才能做到这一点？

JS

$("#menu").menu();
$("#search").tabs();

<ul id="menu" style="border: 0px; background:none">
<li><a id="2" style="cursor: pointer">Search</a>
<ul style="z-index: 2">
<li><a id="2a" style="cursor: pointer">By Filter</a></li>
<li><a id="2b" style="cursor: pointer">By Room</a>    
</li>
</ul>
</li>
</ul>

<div id="search" style="z-index: 1;">
  <ul>
    <li><a href="#search-1">Search By Filters</a></li>
    <li><a href="#search-2">Search By Room</a></li>
  </ul>
  <div id="search-1">
  </div>
  <div id="search-2">
  </div>
</div>  

Answer 1

是的，你可以这样做：

为每个搜索选项添加Id

使一个监听器进入菜单中的Id 2，然后单击，调用

$('#tabid').click(); 

以下是完整的代码：

剧本：

$('#2a').click(function(){
    $('#sbf a').click(); 
}); 


$('#2b').click(function(){
    $('#sbr a').click(); 
}); 

HTML代码：

<ul id="menu" style="border: 0px; background:none; width:50%; ">

<li><a id="2" style="cursor: pointer">Search</a>
<ul style="z-index: 2">
<li><a id="2a" style="cursor: pointer">By Filter</a></li>
<li><a id="2b" style="cursor: pointer">By Room</a>    
</li>
</ul>
</li>
</ul>
<div id="search" style="z-index: 1;">
  <ul>
    <li id="sbf"><a href="#search-1">Search By Filters</a></li>
    <li id="sbr"><a href="#search-2">Search By Room</a></li>
  </ul>
  <div id="search-1">
  </div>
  <div id="search-2">
  </div>
</div>  

检查一下这把小提琴

http://jsfiddle.net/ej67Q/