將jQuery菜單鏈接到jQuery選項卡

Question

是否有可能將jQuery菜單鏈接到選項卡？

例如，如果用戶在下面的菜單中選擇「按過濾器」，我希望它打開「按過濾器搜索」選項卡。我怎樣才能做到這一點？

JS

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

HTML

<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/